tweak

components/booking/DatePicker.tsx

@@ -4,10 +4,12 @@ import dayjs, { Dayjs } from "dayjs";
 // Then, include dayjs-business-time
 import dayjsBusinessTime from "dayjs-business-time";
 import utc from "dayjs/plugin/utc";
+import Link from "next/link";
 import { useEffect, useState } from "react";
 
 import classNames from "@lib/classNames";
 import { useLocale } from "@lib/hooks/useLocale";
+import { useRouterAsPath } from "@lib/hooks/useRouterPath";
 import getSlots from "@lib/slots";
 import { WorkingHours } from "@lib/types/schedule";
 
@@ -16,7 +18,6 @@ dayjs.extend(utc);
 
 type DatePickerProps = {
   weekStart: string;
-  onDatePicked: (pickedDate: Dayjs) => void;
   workingHours: WorkingHours[];
   eventLength: number;
   date: Dayjs | null;
@@ -30,7 +31,6 @@ type DatePickerProps = {
 
 function DatePicker({
   weekStart,
-  onDatePicked,
   workingHours,
   eventLength,
   date,
@@ -43,7 +43,7 @@ function DatePicker({
 }: DatePickerProps): JSX.Element {
   const { t } = useLocale();
   const [days, setDays] = useState<({ disabled: boolean; date: number } | null)[]>([]);
-
+  const asPath = useRouterAsPath();
   const [selectedMonth, setSelectedMonth] = useState<number>(
     date
       ? periodType === PeriodType.RANGE
@@ -194,11 +194,20 @@ function DatePicker({
             {day === null ? (
               <div key={`e-${idx}`} />
             ) : (
-              <button
-                onClick={() => onDatePicked(inviteeDate().date(day.date))}
-                disabled={day.disabled}
+              <Link
+                href={`${
+                  rescheduleUid
+                    ? `${asPath}?rescheduleUid=${rescheduleUid}&date=${encodeURIComponent(
+                        inviteeDate().date(day.date).format("YYYY-MM-DDZZ")
+                      )}`
+                    : `${asPath}?date=${encodeURIComponent(
+                        inviteeDate().date(day.date).format("YYYY-MM-DDZZ")
+                      )}`
+                }`}
+                scroll={false}>
+                <a
                   className={classNames(
-                  "absolute w-full top-0 left-0 right-0 bottom-0 rounded-sm text-center mx-auto",
+                    "rounded-sm text-center border border-transparent absolute inset-0",
                     "hover:border hover:border-brand dark:hover:border-white",
                     day.disabled
                       ? "text-gray-400 font-light hover:border-0 cursor-default"
@@ -209,10 +218,18 @@ function DatePicker({
                       ? " bg-gray-100 dark:bg-gray-600"
                       : ""
                   )}
+                  onClick={(e) => {
+                    if (day.disabled) {
+                      e.preventDefault();
+                    }
+                  }}
                   data-testid="day"
                   data-disabled={day.disabled}>
+                  <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
                     {day.date}
-              </button>
+                  </span>
+                </a>
+              </Link>
             )}
           </div>
         ))}