diff --git a/packages/features/bookings/Booker/Booker.tsx b/packages/features/bookings/Booker/Booker.tsx index 821a54e00cff94..56ec86267ef177 100644 --- a/packages/features/bookings/Booker/Booker.tsx +++ b/packages/features/bookings/Booker/Booker.tsx @@ -39,7 +39,7 @@ import { RedirectToInstantMeetingModal } from "./components/RedirectToInstantMee import { BookerSection } from "./components/Section"; import { NotFound } from "./components/Unavailable"; import { useIsQuickAvailabilityCheckFeatureEnabled } from "./components/hooks/useIsQuickAvailabilityCheckFeatureEnabled"; -import { fadeInLeft, getBookerSizeClassNames, useBookerResizeAnimation } from "./config"; +import { extraDaysConfig, fadeInLeft, getBookerSizeClassNames, useBookerResizeAnimation } from "./config"; import framerFeatures from "./framer-features"; import type { BookerProps, WrappedBookerProps } from "./types"; import { isBookingDryRun } from "./utils/isBookingDryRun"; @@ -103,6 +103,7 @@ const BookerComponent = ({ hideEventTypeDetails, isEmbed, bookerLayouts, + isTablet, } = bookerLayout; const [seatedEventData, setSeatedEventData] = useBookerStoreContext( @@ -128,9 +129,53 @@ const BookerComponent = ({ : 0; // Taking one more available slot(extraDays + 1) to calculate the no of days in between, that next and prev button need to shift. const availableSlots = nonEmptyScheduleDays.slice(0, extraDays + 1); - if (nonEmptyScheduleDays.length !== 0) - columnViewExtraDays.current = - Math.abs(dayjs(selectedDate).diff(availableSlots[availableSlots.length - 2], "day")) + addonDays; + + const columnViewExtraDaysConfig = isTablet + ? extraDaysConfig[BookerLayouts.COLUMN_VIEW].tablet + : extraDaysConfig[BookerLayouts.COLUMN_VIEW].desktop; + + const relevantDates = nonEmptyScheduleDays.slice(0, columnViewExtraDaysConfig + 1).join(","); + + const calculatedColumnViewExtraDays = useMemo(() => { + if (layout !== BookerLayouts.COLUMN_VIEW) { + return columnViewExtraDays.current; + } + + if (nonEmptyScheduleDays.length === 0) { + return columnViewExtraDaysConfig; + } + + const columnAddonDays = + nonEmptyScheduleDays.length < columnViewExtraDaysConfig + ? (columnViewExtraDaysConfig - nonEmptyScheduleDays.length + 1) * totalWeekDays + : nonEmptyScheduleDays.length === columnViewExtraDaysConfig + ? totalWeekDays + : 0; + + const columnAvailableSlots = nonEmptyScheduleDays.slice(0, columnViewExtraDaysConfig + 1); + + if (columnAvailableSlots.length < 2) { + return columnViewExtraDaysConfig; + } + + const calculated = + Math.abs(dayjs(selectedDate).diff(columnAvailableSlots[columnAvailableSlots.length - 2], "day")) + + columnAddonDays; + + return calculated; + }, [ + layout, + selectedDate, + relevantDates, + nonEmptyScheduleDays.length, + isTablet, + columnViewExtraDays, + columnViewExtraDaysConfig, + ]); + + if (layout === BookerLayouts.COLUMN_VIEW) { + columnViewExtraDays.current = calculatedColumnViewExtraDays; + } const nextSlots = Math.abs(dayjs(selectedDate).diff(availableSlots[availableSlots.length - 1], "day")) + addonDays; diff --git a/packages/features/bookings/Booker/__mocks__/config.ts b/packages/features/bookings/Booker/__mocks__/config.ts index 3629a432ff1dfb..47fb22f7b7dc54 100644 --- a/packages/features/bookings/Booker/__mocks__/config.ts +++ b/packages/features/bookings/Booker/__mocks__/config.ts @@ -2,4 +2,10 @@ vi.mock("../config", () => ({ useBookerResizeAnimation: () => ({ current: document.createElement("div") }), getBookerSizeClassNames: () => [], fadeInLeft: {}, + extraDaysConfig: { + mobile: {desktop: 0, tablet: 0}, + month_view: {desktop: 0, tablet: 0}, + week_view: {desktop: 7, tablet: 4}, + column_view: {desktop: 6, tablet: 2}, + } })); diff --git a/packages/features/bookings/Booker/__tests__/Booker.test.tsx b/packages/features/bookings/Booker/__tests__/Booker.test.tsx index f1b6810e851508..a8a7d7ac82374b 100644 --- a/packages/features/bookings/Booker/__tests__/Booker.test.tsx +++ b/packages/features/bookings/Booker/__tests__/Booker.test.tsx @@ -136,6 +136,7 @@ const defaultProps = { extraDays: 7, columnViewExtraDays: { current: 7 }, isMobile: false, + isTablet: false, layout: "MONTH_VIEW", hideEventTypeDetails: false, isEmbed: false,