Feature/booking page refactor (#3035)

* Extracted UI related logic on the DatePicker, stripped out all logic

* wip

* fixed small regression due to merge

* Fix alignment of the chevrons

* Added isToday dot, added onMonthChange so we can fetch this month slots

* Added includedDates to inverse excludedDates

* removed trpcState

* Improvements to the state

* All params are now dynamic

* This builds the flat map so not all paths block on every new build

* Added requiresConfirmation

* Correctly take into account getFilteredTimes to make the calendar function

* Rewritten team availability, seems to work

* Circumvent i18n flicker by showing the loader instead

* 'You can remove this code. Its not being used now' - Hariom

* Nailed a persistent little bug, new Date() caused the current day to flicker on and off

* TS fixes

* Fix some eventType details in AvailableTimes

* '5 / 6 Seats Available' instead of '6 / Seats Available'

* More type fixes

* Removed unrelated merge artifact

* Use WEBAPP_URL instead of hardcoded

* Next round of TS fixes

* I believe this was mistyped

* Temporarily disabled rescheduling 'this is when you originally scheduled', so removed dep

* Sorting some dead code

* This page has a lot of red, not all related to this PR

* A PR to your PR (#3067)

* Cleanup

* Cleanup

* Uses zod to parse params

* Type fixes

* Fixes ISR

* E2E fixes

* Disabled dynamic bookings until post v1.7

* More test fixes

* Fixed border position (transparent border) to prevent dot from jumping - and possibly fix spacing

* Disabled style nitpicks

* Delete useSlots.ts

Removed early design artifact

* Unlock DatePicker locale

* Adds mini spinner to DatePicker

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Co-authored-by: zomars <zomars@me.com>

Author: 4 people

apps/web/components/booking/AvailableTimes.tsx

@@ -1,66 +1,44 @@
-import { ExclamationIcon } from "@heroicons/react/solid";
 import { SchedulingType } from "@prisma/client";
 import dayjs, { Dayjs } from "dayjs";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import React, { FC, useEffect, useState } from "react";
+import { FC, useEffect, useState } from "react";
 
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { nameOfDay } from "@calcom/lib/weekday";
 
 import classNames from "@lib/classNames";
 import { timeZone } from "@lib/clock";
-import { useLocale } from "@lib/hooks/useLocale";
-import { useSlots } from "@lib/hooks/useSlots";
 
-import Loader from "@components/Loader";
+import type { Slot } from "@server/routers/viewer/slots";
 
 type AvailableTimesProps = {
   timeFormat: string;
-  minimumBookingNotice: number;
-  beforeBufferTime: number;
-  afterBufferTime: number;
   eventTypeId: number;
-  eventLength: number;
   recurringCount: number | undefined;
   eventTypeSlug: string;
-  slotInterval: number | null;
   date: Dayjs;
   users: {
     username: string | null;
   }[];
   schedulingType: SchedulingType | null;
   seatsPerTimeSlot?: number | null;
+  slots?: Slot[];
 };
 
 const AvailableTimes: FC<AvailableTimesProps> = ({
+  slots = [],
   date,
-  eventLength,
   eventTypeId,
   eventTypeSlug,
-  slotInterval,
-  minimumBookingNotice,
   recurringCount,
   timeFormat,
-  users,
   schedulingType,
-  beforeBufferTime,
-  afterBufferTime,
   seatsPerTimeSlot,
 }) => {
   const { t, i18n } = useLocale();
   const router = useRouter();
   const { rescheduleUid } = router.query;
-  const { slots, loading, error } = useSlots({
-    date,
-    slotInterval,
-    eventLength,
-    schedulingType,
-    users,
-    minimumBookingNotice,
-    beforeBufferTime,
-    afterBufferTime,
-    eventTypeId,
-  });
 
   const [brand, setBrand] = useState("#292929");
 
@@ -80,8 +58,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
         </span>
       </div>
       <div className="flex-grow overflow-y-auto md:h-[364px]">
-        {!loading &&
-          slots?.length > 0 &&
+        {slots?.length > 0 &&
           slots.map((slot) => {
             type BookingURL = {
               pathname: string;
@@ -91,7 +68,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
               pathname: "book",
               query: {
                 ...router.query,
-                date: slot.time.format(),
+                date: dayjs(slot.time).format(),
                 type: eventTypeId,
                 slug: eventTypeSlug,
                 /** Treat as recurring only when a count exist and it's not a rescheduling workflow */
@@ -113,15 +90,15 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
             }
 
             return (
-              <div key={slot.time.format()}>
+              <div key={dayjs(slot.time).format()}>
                 {/* Current there is no way to disable Next.js Links */}
                 {seatsPerTimeSlot && slot.attendees && slot.attendees >= seatsPerTimeSlot ? (
                   <div
                     className={classNames(
                       "text-primary-500 mb-2 block rounded-sm border bg-white py-4 font-medium opacity-25  dark:border-transparent dark:bg-gray-600 dark:text-neutral-200 ",
                       brand === "#fff" || brand === "#ffffff" ? "border-brandcontrast" : "border-brand"
                     )}>
-                    {slot.time.format(timeFormat)}
+                    {dayjs(slot.time).tz(timeZone()).format(timeFormat)}
                     {!!seatsPerTimeSlot && <p className={`text-sm`}>{t("booking_full")}</p>}
                   </div>
                 ) : (
@@ -132,7 +109,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
                         brand === "#fff" || brand === "#ffffff" ? "border-brandcontrast" : "border-brand"
                       )}
                       data-testid="time">
-                      {dayjs.tz(slot.time, timeZone()).format(timeFormat)}
+                      {dayjs(slot.time).tz(timeZone()).format(timeFormat)}
                       {!!seatsPerTimeSlot && (
                         <p
                           className={`${
@@ -152,26 +129,11 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
               </div>
             );
           })}
-        {!loading && !error && !slots.length && (
+        {!slots.length && (
           <div className="-mt-4 flex h-full w-full flex-col content-center items-center justify-center">
             <h1 className="my-6 text-xl text-black dark:text-white">{t("all_booked_today")}</h1>
           </div>
         )}
-
-        {loading && <Loader />}
-
-        {error && (
-          <div className="border-l-4 border-yellow-400 bg-yellow-50 p-4">
-            <div className="flex">
-              <div className="flex-shrink-0">
-                <ExclamationIcon className="h-5 w-5 text-yellow-400" aria-hidden="true" />
-              </div>
-              <div className="ltr:ml-3 rtl:mr-3">
-                <p className="text-sm text-yellow-700">{t("slots_load_fail")}</p>
-              </div>
-            </div>
-          </div>
-        )}
       </div>
     </div>
   );

apps/web/components/booking/DatePicker.tsx

@@ -249,15 +249,9 @@ function DatePicker({
                   day.disabled ? { ...disabledDateButtonEmbedStyles } : { ...enabledDateButtonEmbedStyles }
                 }
                 className={classNames(
-                  "absolute top-0 left-0 right-0 bottom-0 mx-auto w-full rounded-sm text-center",
-                  "hover:border-brand hover:border dark:hover:border-white",
-                  day.disabled
-                    ? "text-bookinglighter cursor-default font-light hover:border-0"
-                    : "font-medium",
+                  "hover:border-brand disabled:text-bookinglighter absolute top-0 left-0 right-0 bottom-0 mx-auto w-full rounded-sm text-center font-medium hover:border disabled:cursor-default disabled:font-light disabled:hover:border-0 dark:hover:border-white",
                   date && date.isSame(browsingDate.date(day.date), "day")
-                    ? "bg-brand text-brandcontrast dark:bg-darkmodebrand dark:text-darkmodebrandcontrast"
-                    : !day.disabled
-                    ? " bg-gray-100 dark:bg-gray-600 dark:text-white"
+                    ? "bg-brand text-brandcontrast dark:bg-darkmodebrand dark:text-darkmodebrandcontrast disabled:bg-gray-100 disabled:dark:bg-gray-600 disabled:dark:text-white"
                     : ""
                 )}
                 data-testid="day"