add changes

apps/web/playwright/booking/collectiveEventType/collectiveEventType.e2e.ts

@@ -0,0 +1,63 @@
+import { randomString } from "@calcom/lib/random";
+
+import { loginUser } from "../../fixtures/regularBookings";
+import { test } from "../../lib/fixtures";
+import { localize } from "../../lib/testUtils";
+
+test.describe("Create a Team, a Collective Event Type and Book a Meeting", () => {
+  test.beforeEach(async ({ page, users }) => {
+    await loginUser(users);
+    await page.goto("/event-types");
+  });
+
+  test("Create Collective Event type and Book a Meeting", async ({ bookingPage }) => {
+    const teamName = `Team example-${randomString(3)}`;
+    const backToBookingsText = (await localize("en"))("back_to_bookings");
+
+    await bookingPage.createTeam(teamName);
+    await bookingPage.createTeamEventType("test-collective", { isCollectiveType: true });
+    const eventTypePage = await bookingPage.previewEventType();
+    await bookingPage.selectTimeSlot(eventTypePage);
+
+    await bookingPage.confirmBooking(eventTypePage);
+    await bookingPage.goToPage(backToBookingsText, eventTypePage);
+    await bookingPage.assertLabelWithCorrectTeamName(eventTypePage, teamName);
+    await bookingPage.assertBookingWithCorrectTitleAndDescription(eventTypePage, {
+      profileName: "testuser",
+      bookingName: "test-collective",
+      teamName: teamName,
+    });
+
+    await bookingPage.clickOnBooking(eventTypePage, teamName);
+    await bookingPage.rescheduleBooking(eventTypePage);
+    await bookingPage.assertBookingRescheduled(eventTypePage);
+    await bookingPage.cancelBookingWithReason(eventTypePage);
+    await bookingPage.assertBookingCanceled(eventTypePage);
+  });
+
+  test("Create Collective Event type and Book a Meeting (with added guest)", async ({ bookingPage }) => {
+    const teamName = `Team example-${randomString(3)}`;
+    const backToBookingsText = (await localize("en"))("back_to_bookings");
+
+    await bookingPage.createTeam(teamName);
+    await bookingPage.createTeamEventType("test-collective", { isCollectiveType: true });
+    const eventTypePage = await bookingPage.previewEventType();
+    await bookingPage.selectTimeSlot(eventTypePage);
+    await bookingPage.addGuests(eventTypePage, { guests: ["test@example.com"] });
+    await bookingPage.confirmBooking(eventTypePage);
+    await bookingPage.goToPage(backToBookingsText, eventTypePage);
+    await bookingPage.assertLabelWithCorrectTeamName(eventTypePage, teamName);
+    await bookingPage.assertBookingWithCorrectTitleAndDescription(eventTypePage, {
+      profileName: "testuser",
+      bookingName: "test-collective",
+      teamName: teamName,
+      aditionalGuestEmail: "test@example.com",
+    });
+
+    await bookingPage.clickOnBooking(eventTypePage, teamName);
+    await bookingPage.rescheduleBooking(eventTypePage);
+    await bookingPage.assertBookingRescheduled(eventTypePage);
+    await bookingPage.cancelBookingWithReason(eventTypePage);
+    await bookingPage.assertBookingCanceled(eventTypePage);
+  });
+});

apps/web/playwright/booking/longTextQuestion.e2e.ts

@@ -9,48 +9,50 @@ test.describe("Booking With Long Text Question and Each Other Question", () => {
     await page.goto("/event-types");
   });
 
-  test("Long Text and Address required", async ({ bookingPage }) => {
-    await bookingPage.goToEventType("30 min");
-    await bookingPage.goToTab("event_advanced_tab_title");
-    await bookingPage.addQuestion("textarea", "textarea-test", "textarea test", true, "textarea test");
-    await bookingPage.addQuestion("address", "address-test", "address test", true, "address test");
-    await bookingPage.updateEventType();
-    const eventTypePage = await bookingPage.previewEventType();
-    await bookingPage.selectTimeSlot(eventTypePage);
-    await bookingPage.fillAndConfirmBooking({
-      eventTypePage,
-      placeholderText: "Please share anything that will help prepare for our meeting.",
-      question: "textarea",
-      fillText: "Test Long Text question and Address question (both required)",
-      secondQuestion: "address",
-      options: bookingOptions,
+  test.describe("Booking With Long Text Question and Address Question", () => {
+    test("Long Text and Address required", async ({ bookingPage }) => {
+      await bookingPage.goToEventType("30 min");
+      await bookingPage.goToTab("event_advanced_tab_title");
+      await bookingPage.addQuestion("textarea", "textarea-test", "textarea test", true, "textarea test");
+      await bookingPage.addQuestion("address", "address-test", "address test", true, "address test");
+      await bookingPage.updateEventType();
+      const eventTypePage = await bookingPage.previewEventType();
+      await bookingPage.selectTimeSlot(eventTypePage);
+      await bookingPage.fillAndConfirmBooking({
+        eventTypePage,
+        placeholderText: "Please share anything that will help prepare for our meeting.",
+        question: "textarea",
+        fillText: "Test Long Text question and Address question (both required)",
+        secondQuestion: "address",
+        options: bookingOptions,
+      });
+      await bookingPage.rescheduleBooking(eventTypePage);
+      await bookingPage.assertBookingRescheduled(eventTypePage);
+      await bookingPage.cancelBooking(eventTypePage);
+      await bookingPage.assertBookingCanceled(eventTypePage);
     });
-    await bookingPage.rescheduleBooking(eventTypePage);
-    await bookingPage.assertBookingRescheduled(eventTypePage);
-    await bookingPage.cancelBooking(eventTypePage);
-    await bookingPage.assertBookingCanceled(eventTypePage);
-  });
 
-  test("Long Text required and Address not required", async ({ bookingPage }) => {
-    await bookingPage.goToEventType("30 min");
-    await bookingPage.goToTab("event_advanced_tab_title");
-    await bookingPage.addQuestion("textarea", "textarea-test", "textarea test", true, "textarea test");
-    await bookingPage.addQuestion("address", "address-test", "address test", false, "address test");
-    await bookingPage.updateEventType();
-    const eventTypePage = await bookingPage.previewEventType();
-    await bookingPage.selectTimeSlot(eventTypePage);
-    await bookingPage.fillAndConfirmBooking({
-      eventTypePage,
-      placeholderText: "Please share anything that will help prepare for our meeting.",
-      question: "textarea",
-      fillText: "Test Long Text question and Address question (only Long Text required)",
-      secondQuestion: "address",
-      options: { ...bookingOptions, isRequired: false },
+    test("Long Text required and Address not required", async ({ bookingPage }) => {
+      await bookingPage.goToEventType("30 min");
+      await bookingPage.goToTab("event_advanced_tab_title");
+      await bookingPage.addQuestion("textarea", "textarea-test", "textarea test", true, "textarea test");
+      await bookingPage.addQuestion("address", "address-test", "address test", false, "address test");
+      await bookingPage.updateEventType();
+      const eventTypePage = await bookingPage.previewEventType();
+      await bookingPage.selectTimeSlot(eventTypePage);
+      await bookingPage.fillAndConfirmBooking({
+        eventTypePage,
+        placeholderText: "Please share anything that will help prepare for our meeting.",
+        question: "textarea",
+        fillText: "Test Long Text question and Address question (only Long Text required)",
+        secondQuestion: "address",
+        options: { ...bookingOptions, isRequired: false },
+      });
+      await bookingPage.rescheduleBooking(eventTypePage);
+      await bookingPage.assertBookingRescheduled(eventTypePage);
+      await bookingPage.cancelBooking(eventTypePage);
+      await bookingPage.assertBookingCanceled(eventTypePage);
     });
-    await bookingPage.rescheduleBooking(eventTypePage);
-    await bookingPage.assertBookingRescheduled(eventTypePage);
-    await bookingPage.cancelBooking(eventTypePage);
-    await bookingPage.assertBookingCanceled(eventTypePage);
   });
 
   test.describe("Booking With Long Text Question and Checkbox Group Question", () => {

apps/web/playwright/fixtures/regularBookings.ts

@@ -24,6 +24,8 @@ interface QuestionActions {
   [key: string]: () => Promise<void>;
 }
 
+type teamBookingtypes = { isManagedType?: boolean; isRoundRobinType?: boolean; isCollectiveType?: boolean };
+
 type customLocators = {
   shouldChangeSelectLocator: boolean;
   shouldUseLastRadioGroupLocator: boolean;
@@ -195,6 +197,9 @@ export function createBookingPageFixture(page: Page) {
     goToEventType: async (eventType: string) => {
       await page.getByRole("link", { name: eventType }).click();
     },
+    goToPage: async (pageName: string, page: Page) => {
+      await page.getByRole("link", { name: pageName }).click();
+    },
     goToTab: async (tabName: string) => {
       await page.getByTestId(`vertical-tab-${tabName}`).click();
     },
@@ -376,16 +381,103 @@ export function createBookingPageFixture(page: Page) {
       const confirmButton = options.isReschedule ? "confirm-reschedule-button" : "confirm-book-button";
       await fillAllQuestions(eventTypePage, questions, options);
       await eventTypePage.getByTestId(confirmButton).click();
-      await eventTypePage.waitForTimeout(400);
-      if (await eventTypePage.getByRole("heading", { name: "Could not book the meeting." }).isVisible()) {
-        await eventTypePage.getByTestId("back").click();
-        await eventTypePage.getByTestId("time").last().click();
-        await fillAllQuestions(eventTypePage, questions, options);
-        await eventTypePage.getByTestId(confirmButton).click();
-      }
       const scheduleSuccessfullyPage = eventTypePage.getByText(scheduleSuccessfullyText);
       await scheduleSuccessfullyPage.waitFor({ state: "visible" });
       await expect(scheduleSuccessfullyPage).toBeVisible();
     },
+    addGuests: async (eventTypePage: Page, options: { guests: string[] }) => {
+      await eventTypePage.getByTestId("add-guests").click();
+      for (const guest of options.guests) {
+        await eventTypePage.getByPlaceholder("Email").fill(guest);
+      }
+    },
+    createTeam: async (name: string) => {
+      await page.getByTestId("teams-test").click();
+      await page.getByTestId("new-team-btn").click();
+      await page.getByPlaceholder("Acme Inc.").click();
+      await page.getByPlaceholder("Acme Inc.").fill(name);
+      await page.getByTestId("continue-button").click();
+      await page.getByTestId("publish-button").click();
+
+      await page.getByTestId("vertical-tab-Back").click();
+    },
+
+    createTeamEventType: async (name: string, options: teamBookingtypes) => {
+      await page.getByTestId("new-event-type").click();
+      await page.getByTestId("option-0").click();
+
+      // We first simulate to create a default event type to check if managed option is not available
+
+      const managedEventDescription = (await localize("en"))("managed_event_description");
+      const roundRobinEventDescription = (await localize("en"))("round_robin_description");
+      const collectiveEventDescription = (await localize("en"))("collective_description");
+      const quickChatText = (await localize("en"))("quick_chat");
+      await expect(page.locator("div").filter({ hasText: managedEventDescription })).toBeHidden();
+      await page.getByTestId("dialog-rejection").click();
+
+      await page.getByTestId("new-event-type").click();
+      await page.getByTestId("option-team-1").click();
+      await page.getByPlaceholder(quickChatText).fill(name);
+      if (options.isCollectiveType) {
+        await page
+          .locator("div")
+          .filter({ hasText: `Collective${collectiveEventDescription}` })
+          .getByRole("radio")
+          .first()
+          .click();
+      }
+
+      if (options.isRoundRobinType) {
+        await page
+          .locator("div")
+          .filter({ hasText: `Round Robin${roundRobinEventDescription}` })
+          .getByRole("radio")
+          .nth(1)
+          .click();
+      }
+
+      if (options.isManagedType) {
+        await page
+          .locator("div")
+          .filter({ hasText: `Managed Event${managedEventDescription}` })
+          .getByRole("radio")
+          .last()
+          .click();
+
+        const managedEventClarification = (await localize("en"))("managed_event_url_clarification");
+        await expect(page.getByText(managedEventClarification)).toBeVisible();
+      }
+
+      const continueText = (await localize("en"))("continue");
+
+      await page.getByRole("button", { name: continueText }).click();
+      await expect(page.getByRole("button", { name: "event type created successfully" })).toBeVisible();
+      await page.getByTestId("update-eventtype").click();
+    },
+    assertLabelWithCorrectTeamName: async (page: Page, teamName: string) => {
+      await expect(page.getByRole("link", { name: teamName }).first()).toBeVisible();
+    },
+    assertBookingWithCorrectTitleAndDescription: async (
+      page: Page,
+      options: { profileName: string; bookingName: string; teamName: string; aditionalGuestEmail?: string }
+    ) => {
+      options.aditionalGuestEmail
+        ? await expect(
+            page.getByRole("link", {
+              name: `${options.bookingName} between ${options.teamName} and ${options.profileName} You , ${options.profileName} and ${options.aditionalGuestEmail}`,
+            })
+          ).toBeVisible()
+        : await expect(
+            page.getByRole("link", {
+              name: `${options.bookingName} between ${options.teamName} and ${options.profileName} You and ${options.profileName}`,
+            })
+          ).toBeVisible();
+    },
+    confirmBooking: async (page?: Page) => {
+      await page?.getByTestId("confirm-book-button").click();
+    },
+    clickOnBooking: async (page: Page, teamName: string) => {
+      await page.getByRole("link", { name: teamName }).first().click();
+    },
   };
 }

packages/features/ee/teams/components/CreateANewTeamForm.tsx

@@ -157,7 +157,8 @@ export const CreateANewTeamForm = () => {
             color="primary"
             EndIcon={ArrowRight}
             type="submit"
-            className="w-full justify-center">
+            className="w-full justify-center"
+            data-testid="continue-button">
             {t(flag.submitLabel)}
           </Button>
         </div>

packages/features/shell/Shell.tsx

@@ -736,7 +736,7 @@ const NavigationItem: React.FC<{
             />
           )}
           {isLocaleReady ? (
-            <span className="hidden w-full justify-between lg:flex">
+            <span className="hidden w-full justify-between lg:flex" data-testid={`${item.name}-test`}>
               <div className="flex">{t(item.name)}</div>
               {item.badge && item.badge}
             </span>