fix(e2e): failsafe if no availabilities (#12168)

apps/web/playwright/fixtures/regularBookings.ts

@@ -1,5 +1,7 @@
 import { expect, type Page } from "@playwright/test";
 
+import dayjs from "@calcom/dayjs";
+
 import type { createUsersFixture } from "./users";
 
 const reschedulePlaceholderText = "Let others know why you need to reschedule";
@@ -38,6 +40,12 @@ type fillAndConfirmBookingParams = {
 
 type UserFixture = ReturnType<typeof createUsersFixture>;
 
+function isLastDayOfMonth(): boolean {
+  const today = dayjs();
+  const endOfMonth = today.endOf("month");
+  return today.isSame(endOfMonth, "day");
+}
+
 const fillQuestion = async (eventTypePage: Page, questionType: string, customLocators: customLocators) => {
   const questionActions: QuestionActions = {
     phone: async () => {
@@ -114,6 +122,17 @@ export async function loginUser(users: UserFixture) {
   await pro.apiLogin();
 }
 
+const goToNextMonthIfNoAvailabilities = async (eventTypePage: Page) => {
+  try {
+    if (isLastDayOfMonth()) {
+      await eventTypePage.getByTestId("view_next_month").waitFor({ timeout: 6000 });
+      await eventTypePage.getByTestId("view_next_month").click();
+    }
+  } catch (err) {
+    console.info("No need to click on view next month button");
+  }
+};
+
 export function createBookingPageFixture(page: Page) {
   return {
     goToEventType: async (eventType: string) => {
@@ -154,19 +173,13 @@ export function createBookingPageFixture(page: Page) {
       return eventtypePromise;
     },
     selectTimeSlot: async (eventTypePage: Page) => {
-      while (await eventTypePage.getByRole("button", { name: "View next" }).isVisible()) {
-        await eventTypePage.getByRole("button", { name: "View next" }).click();
-      }
+      await goToNextMonthIfNoAvailabilities(eventTypePage);
       await eventTypePage.getByTestId("time").first().click();
     },
     clickReschedule: async () => {
       await page.getByText("Reschedule").click();
     },
-    navigateToAvailableTimeSlot: async () => {
-      while (await page.getByRole("button", { name: "View next" }).isVisible()) {
-        await page.getByRole("button", { name: "View next" }).click();
-      }
-    },
+
     selectFirstAvailableTime: async () => {
       await page.getByTestId("time").first().click();
     },
@@ -186,6 +199,7 @@ export function createBookingPageFixture(page: Page) {
     },
 
     rescheduleBooking: async (eventTypePage: Page) => {
+      await goToNextMonthIfNoAvailabilities(eventTypePage);
       await eventTypePage.getByText("Reschedule").click();
       while (await eventTypePage.getByRole("button", { name: "View next" }).isVisible()) {
         await eventTypePage.getByRole("button", { name: "View next" }).click();

packages/features/calendars/DatePicker.tsx

@@ -95,7 +95,7 @@ const NoAvailabilityOverlay = ({
   return (
     <div className="bg-muted border-subtle absolute left-1/2 top-40 -mt-10 w-max -translate-x-1/2 -translate-y-1/2 transform rounded-md border p-8 shadow-sm">
       <h4 className="text-emphasis mb-4 font-medium">{t("no_availability_in_month", { month: month })}</h4>
-      <Button onClick={nextMonthButton} color="primary" EndIcon={ArrowRight}>
+      <Button onClick={nextMonthButton} color="primary" EndIcon={ArrowRight} data-testid="view_next_month">
         {t("view_next_month")}
       </Button>
     </div>