From 405a4cc8506676d9c6304e4a4f64da9daadc71ca Mon Sep 17 00:00:00 2001 From: Augusto Miranda Galego <31139680+gutogalego@users.noreply.github.com> Date: Tue, 19 Sep 2023 22:01:26 +0200 Subject: [PATCH] fix: Time Buttons Should be Scroll not the Whole Right Side (#11412) Co-authored-by: Peer Richelsen Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com> --- packages/features/bookings/Booker/Booker.tsx | 2 +- .../Booker/components/AvailableTimeSlots.tsx | 71 +++++++++++-------- .../bookings/components/AvailableTimes.tsx | 39 ---------- .../components/AvailableTimesHeader.tsx | 60 ++++++++++++++++ packages/features/bookings/index.ts | 1 + packages/features/embed/Embed.tsx | 3 +- 6 files changed, 107 insertions(+), 69 deletions(-) create mode 100644 packages/features/bookings/components/AvailableTimesHeader.tsx diff --git a/packages/features/bookings/Booker/Booker.tsx b/packages/features/bookings/Booker/Booker.tsx index fc9d1dde34..553a1eab28 100644 --- a/packages/features/bookings/Booker/Booker.tsx +++ b/packages/features/bookings/Booker/Booker.tsx @@ -316,7 +316,7 @@ const BookerComponent = ({ className={classNames( "border-subtle rtl:border-default flex h-full w-full flex-col overflow-x-auto px-5 py-3 pb-0 rtl:border-r ltr:md:border-l", layout === BookerLayouts.MONTH_VIEW && - "scroll-bar h-full overflow-auto md:w-[var(--booker-timeslots-width)]", + "h-full overflow-hidden md:w-[var(--booker-timeslots-width)]", layout !== BookerLayouts.MONTH_VIEW && "sticky top-0" )} ref={timeslotsRef} diff --git a/packages/features/bookings/Booker/components/AvailableTimeSlots.tsx b/packages/features/bookings/Booker/components/AvailableTimeSlots.tsx index 3243d1e5e2..f4d681aa79 100644 --- a/packages/features/bookings/Booker/components/AvailableTimeSlots.tsx +++ b/packages/features/bookings/Booker/components/AvailableTimeSlots.tsx @@ -10,6 +10,7 @@ import useMediaQuery from "@calcom/lib/hooks/useMediaQuery"; import { BookerLayouts } from "@calcom/prisma/zod-utils"; import { trpc } from "@calcom/trpc"; +import { AvailableTimesHeader } from "../../components/AvailableTimesHeader"; import { useBookerStore } from "../store"; import { useEvent, useScheduleForEvent } from "../utils/event"; @@ -100,33 +101,47 @@ export const AvailableTimeSlots = ({ }, [containerRef, schedule.isLoading, isEmbed, isMobile]); return ( -
- {schedule.isLoading - ? // Shows exact amount of days as skeleton. - Array.from({ length: 1 + (extraDays ?? 0) }).map((_, i) => ) - : slotsPerDay.length > 0 && - slotsPerDay.map((slots) => ( - - ))} -
+ <> +
+ {schedule.isLoading + ? // Shows exact amount of days as skeleton. + Array.from({ length: 1 + (extraDays ?? 0) }).map((_, i) => ) + : slotsPerDay.length > 0 && + slotsPerDay.map((slots) => ( + + ))} +
+
+ {schedule.isLoading + ? // Shows exact amount of days as skeleton. + Array.from({ length: 1 + (extraDays ?? 0) }).map((_, i) => ) + : slotsPerDay.length > 0 && + slotsPerDay.map((slots) => ( + + ))} +
+ ); }; diff --git a/packages/features/bookings/components/AvailableTimes.tsx b/packages/features/bookings/components/AvailableTimes.tsx index 0808394202..4d9b4a3a21 100644 --- a/packages/features/bookings/components/AvailableTimes.tsx +++ b/packages/features/bookings/components/AvailableTimes.tsx @@ -1,22 +1,16 @@ import { CalendarX2 } from "lucide-react"; -import { shallow } from "zustand/shallow"; -import type { Dayjs } from "@calcom/dayjs"; import dayjs from "@calcom/dayjs"; import type { Slots } from "@calcom/features/schedules"; import { classNames } from "@calcom/lib"; import { useLocale } from "@calcom/lib/hooks/useLocale"; -import { nameOfDay } from "@calcom/lib/weekday"; -import { BookerLayouts } from "@calcom/prisma/zod-utils"; import { Button, SkeletonText } from "@calcom/ui"; import { useBookerStore } from "../Booker/store"; import { useTimePreferences } from "../lib"; import { SeatsAvailabilityText } from "./SeatsAvailabilityText"; -import { TimeFormatToggle } from "./TimeFormatToggle"; type AvailableTimesProps = { - date: Dayjs; slots: Slots[string]; onTimeSelect: ( time: string, @@ -28,58 +22,25 @@ type AvailableTimesProps = { showAvailableSeatsCount?: boolean | null; showTimeFormatToggle?: boolean; className?: string; - availableMonth?: string | undefined; selectedSlots?: string[]; }; export const AvailableTimes = ({ - date, slots, onTimeSelect, seatsPerTimeSlot, showAvailableSeatsCount, showTimeFormatToggle = true, className, - availableMonth, selectedSlots, }: AvailableTimesProps) => { const { t, i18n } = useLocale(); const [timeFormat, timezone] = useTimePreferences((state) => [state.timeFormat, state.timezone]); const bookingData = useBookerStore((state) => state.bookingData); const hasTimeSlots = !!seatsPerTimeSlot; - const [layout] = useBookerStore((state) => [state.layout], shallow); - const isColumnView = layout === BookerLayouts.COLUMN_VIEW; - const isMonthView = layout === BookerLayouts.MONTH_VIEW; - const isToday = dayjs().isSame(date, "day"); return (
-
- - - {nameOfDay(i18n.language, Number(date.format("d")), "short")} - - - {date.format("DD")} - {availableMonth && `, ${availableMonth}`} - - - - {showTimeFormatToggle && ( -
- -
- )} -
{!slots.length && (
diff --git a/packages/features/bookings/components/AvailableTimesHeader.tsx b/packages/features/bookings/components/AvailableTimesHeader.tsx new file mode 100644 index 0000000000..eeba9ca57e --- /dev/null +++ b/packages/features/bookings/components/AvailableTimesHeader.tsx @@ -0,0 +1,60 @@ +import { shallow } from "zustand/shallow"; + +import type { Dayjs } from "@calcom/dayjs"; +import dayjs from "@calcom/dayjs"; +import { classNames } from "@calcom/lib"; +import { useLocale } from "@calcom/lib/hooks/useLocale"; +import { nameOfDay } from "@calcom/lib/weekday"; +import { BookerLayouts } from "@calcom/prisma/zod-utils"; + +import { useBookerStore } from "../Booker/store"; +import { TimeFormatToggle } from "./TimeFormatToggle"; + +type AvailableTimesHeaderProps = { + date: Dayjs; + showTimeFormatToggle?: boolean; + availableMonth?: string | undefined; +}; + +export const AvailableTimesHeader = ({ + date, + + showTimeFormatToggle = true, + + availableMonth, +}: AvailableTimesHeaderProps) => { + const { t, i18n } = useLocale(); + const [layout] = useBookerStore((state) => [state.layout], shallow); + const isColumnView = layout === BookerLayouts.COLUMN_VIEW; + const isMonthView = layout === BookerLayouts.MONTH_VIEW; + const isToday = dayjs().isSame(date, "day"); + + return ( +
+ + + {nameOfDay(i18n.language, Number(date.format("d")), "short")} + + + {date.format("DD")} + {availableMonth && `, ${availableMonth}`} + + + + {showTimeFormatToggle && ( +
+ +
+ )} +
+ ); +}; diff --git a/packages/features/bookings/index.ts b/packages/features/bookings/index.ts index 75d6c92b0e..2488ab0061 100644 --- a/packages/features/bookings/index.ts +++ b/packages/features/bookings/index.ts @@ -6,3 +6,4 @@ export { EventTitle, } from "./components/event-meta"; export { AvailableTimes, AvailableTimesSkeleton } from "./components/AvailableTimes"; +export { AvailableTimesHeader } from "./components/AvailableTimesHeader"; diff --git a/packages/features/embed/Embed.tsx b/packages/features/embed/Embed.tsx index 2cd33e5514..be757d4255 100644 --- a/packages/features/embed/Embed.tsx +++ b/packages/features/embed/Embed.tsx @@ -10,6 +10,7 @@ import { shallow } from "zustand/shallow"; import type { Dayjs } from "@calcom/dayjs"; import dayjs from "@calcom/dayjs"; +import { AvailableTimesHeader } from "@calcom/features/bookings"; import { AvailableTimes } from "@calcom/features/bookings"; import { useBookerStore, useInitializeBookerStore } from "@calcom/features/bookings/Booker/store"; import { useEvent, useScheduleForEvent } from "@calcom/features/bookings/Booker/utils/event"; @@ -248,9 +249,9 @@ const EmailEmbed = ({ eventType, username }: { eventType?: EventType; username:
{selectedDate ? (
+