feat: Added back to today button for new booker week and column views (#9684)

Co-authored-by: Peer Richelsen <peeroke@gmail.com>

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 && (
+            <Button
+              className="capitalize"
+              color="secondary"
+              onClick={() => setSelectedDate(today.format("YYYY-MM-DD"))}>
+              {t("today")}
+            </Button>
+          )}
         </ButtonGroup>
       </div>
       <div className="ml-auto flex gap-2">

packages/features/bookings/Booker/store.ts

@@ -119,8 +119,16 @@ export const useBookerStore = create<BookerStore>((set, get) => ({
   },
   selectedDate: getQueryParam("date") || null,
   setSelectedDate: (selectedDate: string | null) => {
+    const currentSelection = dayjs(get().selectedDate);
+    const newSelection = dayjs(selectedDate);
     set({ selectedDate });
     updateQueryParam("date", selectedDate ?? "");
+
+    // Setting month make sure small calendar in fullscreen layouts also updates.
+    if (newSelection.month() !== currentSelection.month()) {
+      set({ month: newSelection.format("YYYY-MM") });
+      updateQueryParam("month", newSelection.format("YYYY-MM"));
+    }
   },
   addToSelectedDate: (days: number) => {
     const currentSelection = dayjs(get().selectedDate);