diff --git a/packages/features/bookings/Booker/components/Header.tsx b/packages/features/bookings/Booker/components/Header.tsx index 2a3b398d06..a564280b7c 100644 --- a/packages/features/bookings/Booker/components/Header.tsx +++ b/packages/features/bookings/Booker/components/Header.tsx @@ -21,12 +21,19 @@ export function Header({ isMobile: boolean; enabledLayouts: BookerLayouts[]; }) { + const { t } = useLocale(); const [layout, setLayout] = useBookerStore((state) => [state.layout, state.setLayout], shallow); const selectedDateString = useBookerStore((state) => state.selectedDate); + const setSelectedDate = useBookerStore((state) => state.setSelectedDate); const addToSelectedDate = useBookerStore((state) => state.addToSelectedDate); const isMonthView = layout === BookerLayouts.MONTH_VIEW; const selectedDate = dayjs(selectedDateString); const isEmbed = typeof window !== "undefined" && window?.isEmbed?.(); + const today = dayjs(); + const selectedDateMin3DaysDifference = useMemo(() => { + const diff = today.diff(selectedDate, "days"); + return diff > 3 || diff < -3; + }, [today, selectedDate]); const onLayoutToggle = useCallback( (newLayout: string) => { @@ -73,6 +80,14 @@ export function Header({ aria-label="Next Day" onClick={() => addToSelectedDate(extraDays + 1)} /> + {selectedDateMin3DaysDifference && ( + + )}