Uncodedtech
diff --git a/‎apps/web/modules/bookings/components/AvailableTimeSlots.tsx‎
Lines changed: 61 additions & 19 deletions b/‎apps/web/modules/bookings/components/AvailableTimeSlots.tsx‎
Lines changed: 61 additions & 19 deletions
diff --git a/‎apps/web/modules/bookings/components/Booker.test.tsx‎
Lines changed: 29 additions & 8 deletions b/‎apps/web/modules/bookings/components/Booker.test.tsx‎
Lines changed: 29 additions & 8 deletions
@@ -1,7 +1,10 @@
 import { useCallback, useMemo, useRef } from "react";
 
 import dayjs from "@calcom/dayjs";
-import { AvailableTimes, AvailableTimesSkeleton } from "@calcom/web/modules/bookings/components/AvailableTimes";
+import {
+  AvailableTimes,
+  AvailableTimesSkeleton,
+} from "@calcom/web/modules/bookings/components/AvailableTimes";
 import { useBookerStoreContext } from "@calcom/features/bookings/Booker/BookerStoreProvider";
 import type { IUseBookingLoadingStates } from "@calcom/features/bookings/Booker/components/hooks/useBookings";
 import type { BookerEvent } from "@calcom/features/bookings/types";
@@ -25,7 +28,10 @@ type AvailableTimeSlotsProps = {
   seatsPerTimeSlot?: number | null;
   showAvailableSeatsCount?: boolean | null;
   event: {
-    data?: Pick<BookerEvent, "length" | "bookingFields" | "price" | "currency" | "metadata"> | null;
+    data?: Pick<
+      BookerEvent,
+      "length" | "bookingFields" | "price" | "currency" | "metadata"
+    > | null;
   };
   customClassNames?: {
     availableTimeSlotsContainer?: string;
@@ -50,6 +56,7 @@ type AvailableTimeSlotsProps = {
   unavailableTimeSlots: string[];
   confirmButtonDisabled?: boolean;
   onAvailableTimeSlotSelect: (time: string) => void;
+  hideAvailableTimesHeader?: boolean;
 };
 
 /**
@@ -74,19 +81,23 @@ export const AvailableTimeSlots = ({
   confirmButtonDisabled,
   confirmStepClassNames,
   onAvailableTimeSlotSelect,
+  hideAvailableTimesHeader = false,
   ...props
 }: AvailableTimeSlotsProps) => {
   const selectedDate = useBookerStoreContext((state) => state.selectedDate);
 
-  const setSeatedEventData = useBookerStoreContext((state) => state.setSeatedEventData);
+  const setSeatedEventData = useBookerStoreContext(
+    (state) => state.setSeatedEventData
+  );
   const date = selectedDate || dayjs().format("YYYY-MM-DD");
   const [layout] = useBookerStoreContext((state) => [state.layout]);
   const isColumnView = layout === BookerLayouts.COLUMN_VIEW;
   const containerRef = useRef<HTMLDivElement | null>(null);
-  const { setTentativeSelectedTimeslots, tentativeSelectedTimeslots } = useBookerStoreContext((state) => ({
-    setTentativeSelectedTimeslots: state.setTentativeSelectedTimeslots,
-    tentativeSelectedTimeslots: state.tentativeSelectedTimeslots,
-  }));
+  const { setTentativeSelectedTimeslots, tentativeSelectedTimeslots } =
+    useBookerStoreContext((state) => ({
+      setTentativeSelectedTimeslots: state.setTentativeSelectedTimeslots,
+      tentativeSelectedTimeslots: state.tentativeSelectedTimeslots,
+    }));
 
   const onTentativeTimeSelect = ({
     time,
@@ -124,13 +135,22 @@ export const AvailableTimeSlots = ({
     return [];
   }, [date, extraDays, nonEmptyScheduleDaysFromSelectedDate]);
 
-  const { slotsPerDay, toggleConfirmButton } = useSlotsForAvailableDates(dates, scheduleData?.slots);
+  const { slotsPerDay, toggleConfirmButton } = useSlotsForAvailableDates(
+    dates,
+    scheduleData?.slots
+  );
 
   const overlayCalendarToggled =
-    getQueryParam("overlayCalendar") === "true" || localStorage.getItem("overlayCalendarSwitchDefault");
+    getQueryParam("overlayCalendar") === "true" ||
+    localStorage.getItem("overlayCalendarSwitchDefault");
 
   const onTimeSelect = useCallback(
-    (time: string, attendees: number, seatsPerTimeSlot?: number | null, bookingUid?: string) => {
+    (
+      time: string,
+      attendees: number,
+      seatsPerTimeSlot?: number | null,
+      bookingUid?: string
+    ) => {
       // Temporarily allow disabling it, till we are sure that it doesn't cause any significant load on the system
       if (PUBLIC_INVALIDATE_AVAILABLE_SLOTS_ON_BOOKING_FORM) {
         // Ensures that user has latest available slots when they are about to confirm the booking by filling up the details
@@ -181,12 +201,24 @@ export const AvailableTimeSlots = ({
         );
       }
     },
-    [overlayCalendarToggled, onTimeSelect, seatsPerTimeSlot, skipConfirmStep, toggleConfirmButton]
+    [
+      overlayCalendarToggled,
+      onTimeSelect,
+      seatsPerTimeSlot,
+      skipConfirmStep,
+      toggleConfirmButton,
+    ]
   );
 
   return (
     <>
-      <div className={classNames(`flex`, `${customClassNames?.availableTimeSlotsContainer}`)}>
+      <div
+        className={classNames(
+          `flex`,
+          hideAvailableTimesHeader && "hidden",
+          `${customClassNames?.availableTimeSlotsContainer}`
+        )}
+      >
         {isLoading ? (
           <div className="mb-3 h-8" />
         ) : (
@@ -197,15 +229,19 @@ export const AvailableTimeSlots = ({
             return (
               <AvailableTimesHeader
                 customClassNames={{
-                  availableTimeSlotsHeaderContainer: customClassNames?.availableTimeSlotsHeaderContainer,
-                  availableTimeSlotsTitle: customClassNames?.availableTimeSlotsTitle,
-                  availableTimeSlotsTimeFormatToggle: customClassNames?.availableTimeSlotsTimeFormatToggle,
+                  availableTimeSlotsHeaderContainer:
+                    customClassNames?.availableTimeSlotsHeaderContainer,
+                  availableTimeSlotsTitle:
+                    customClassNames?.availableTimeSlotsTitle,
+                  availableTimeSlotsTimeFormatToggle:
+                    customClassNames?.availableTimeSlotsTimeFormatToggle,
                 }}
                 key={slots.date}
                 date={dayjs(slots.date)}
                 showTimeFormatToggle={!isColumnView && !isOOODay}
                 availableMonth={
-                  dayjs(selectedDate).format("MM") !== dayjs(slots.date).format("MM")
+                  dayjs(selectedDate).format("MM") !==
+                  dayjs(slots.date).format("MM")
                     ? dayjs(slots.date).format("MMM")
                     : undefined
                 }
@@ -221,13 +257,19 @@ export const AvailableTimeSlots = ({
           limitHeight && "no-scrollbar grow overflow-auto md:h-[400px]",
           !limitHeight && "flex h-full w-full flex-row gap-4",
           `${customClassNames?.availableTimeSlotsContainer}`
-        )}>
+        )}
+      >
         {isLoading && // Shows exact amount of days as skeleton.
-          Array.from({ length: 1 + (extraDays ?? 0) }).map((_, i) => <AvailableTimesSkeleton key={i} />)}
+          Array.from({ length: 1 + (extraDays ?? 0) }).map((_, i) => (
+            <AvailableTimesSkeleton key={i} />
+          ))}
         {!isLoading &&
           slotsPerDay.length > 0 &&
           slotsPerDay.map((slots) => (
-            <div key={slots.date} className="no-scrollbar overflow-x-hidden! h-full w-full overflow-y-auto">
+            <div
+              key={slots.date}
+              className="no-scrollbar overflow-x-hidden! h-full w-full overflow-y-auto"
+            >
               <AvailableTimes
                 className={customClassNames?.availableTimeSlotsContainer}
                 customClassNames={customClassNames?.availableTimes}
 
@@ -13,12 +13,30 @@ import "@calcom/lib/__mocks__/logger";
 import React from "react";
 import { vi } from "vitest";
 
+vi.mock("next/navigation", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("next/navigation")>();
+  return {
+    ...actual,
+    useRouter: () => ({
+      push: vi.fn(),
+      replace: vi.fn(),
+      back: vi.fn(),
+      forward: vi.fn(),
+      refresh: vi.fn(),
+      prefetch: vi.fn(),
+    }),
+    usePathname: () => "/test-path",
+    useSearchParams: () => new URLSearchParams(),
+    useParams: () => ({}),
+  };
+});
+
 import "@calcom/dayjs/__mocks__";
 import "@calcom/features/auth/Turnstile";
 
-import { Booker } from "./Booker";
 import { render, screen } from "@calcom/features/bookings/Booker/__tests__/test-utils";
 import type { BookerProps, WrappedBookerProps } from "@calcom/features/bookings/Booker/types";
+import { Booker } from "./Booker";
 
 vi.mock("framer-motion", async (importOriginal) => {
   const actual = (await importOriginal()) as any;
@@ -175,9 +193,12 @@ describe("Booker", () => {
   });
 
   it("should render null when in loading state", () => {
-    const { container } = render(<Booker {...defaultProps as unknown as BookerProps & WrappedBookerProps} />, {
-      mockStore: { state: "loading" },
-    });
+    const { container } = render(
+      <Booker {...(defaultProps as unknown as BookerProps & WrappedBookerProps)} />,
+      {
+        mockStore: { state: "loading" },
+      }
+    );
     expect(container).toBeEmptyDOMElement();
   });
 
@@ -194,7 +215,7 @@ describe("Booker", () => {
       },
     };
 
-    render(<Booker {...propsWithDryRun as unknown as BookerProps & WrappedBookerProps} />, {
+    render(<Booker {...(propsWithDryRun as unknown as BookerProps & WrappedBookerProps)} />, {
       mockStore: {
         state: "selecting_time",
         selectedDate: "2024-01-01",
@@ -218,7 +239,7 @@ describe("Booker", () => {
       },
     };
 
-    render(<Booker {...propsWithInvalidate as unknown as BookerProps & WrappedBookerProps} />, {
+    render(<Booker {...(propsWithInvalidate as unknown as BookerProps & WrappedBookerProps)} />, {
       mockStore: { state: "booking" },
     });
     screen.logTestingPlaygroundURL();
@@ -240,11 +261,11 @@ describe("Booker", () => {
         },
       };
 
-      render(<Booker {...propsWithQuickChecks as unknown as BookerProps & WrappedBookerProps} />, {
+      render(<Booker {...(propsWithQuickChecks as unknown as BookerProps & WrappedBookerProps)} />, {
         mockStore: { state: "booking" },
       });
       const bookEventForm = screen.getByTestId("book-event-form");
       await expect(bookEventForm).toHaveAttribute("data-unavailable", "true");
     });
   });
-});
+});