Compare commits
1 Commits
main
...
fix/flex-l
Author | SHA1 | Date |
---|---|---|
Sean Brydon | a65be49c48 |
|
@ -316,7 +316,7 @@ const BookerComponent = ({
|
||||||
className={classNames(
|
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",
|
"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 &&
|
layout === BookerLayouts.MONTH_VIEW &&
|
||||||
"h-full overflow-hidden md:w-[var(--booker-timeslots-width)]",
|
"scroll-bar h-full overflow-auto md:w-[var(--booker-timeslots-width)]",
|
||||||
layout !== BookerLayouts.MONTH_VIEW && "sticky top-0"
|
layout !== BookerLayouts.MONTH_VIEW && "sticky top-0"
|
||||||
)}
|
)}
|
||||||
ref={timeslotsRef}
|
ref={timeslotsRef}
|
||||||
|
|
|
@ -10,7 +10,6 @@ import useMediaQuery from "@calcom/lib/hooks/useMediaQuery";
|
||||||
import { BookerLayouts } from "@calcom/prisma/zod-utils";
|
import { BookerLayouts } from "@calcom/prisma/zod-utils";
|
||||||
import { trpc } from "@calcom/trpc";
|
import { trpc } from "@calcom/trpc";
|
||||||
|
|
||||||
import { AvailableTimesHeader } from "../../components/AvailableTimesHeader";
|
|
||||||
import { useBookerStore } from "../store";
|
import { useBookerStore } from "../store";
|
||||||
import { useEvent, useScheduleForEvent } from "../utils/event";
|
import { useEvent, useScheduleForEvent } from "../utils/event";
|
||||||
|
|
||||||
|
@ -101,47 +100,33 @@ export const AvailableTimeSlots = ({
|
||||||
}, [containerRef, schedule.isLoading, isEmbed, isMobile]);
|
}, [containerRef, schedule.isLoading, isEmbed, isMobile]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div
|
||||||
<div className="flex">
|
ref={containerRef}
|
||||||
{schedule.isLoading
|
className={classNames(
|
||||||
? // Shows exact amount of days as skeleton.
|
limitHeight && "flex-grow md:h-[400px]",
|
||||||
Array.from({ length: 1 + (extraDays ?? 0) }).map((_, i) => <AvailableTimesSkeleton key={i} />)
|
!limitHeight && "flex h-full w-full flex-row gap-4"
|
||||||
: slotsPerDay.length > 0 &&
|
)}>
|
||||||
slotsPerDay.map((slots) => (
|
{schedule.isLoading
|
||||||
<AvailableTimesHeader
|
? // Shows exact amount of days as skeleton.
|
||||||
key={slots.date}
|
Array.from({ length: 1 + (extraDays ?? 0) }).map((_, i) => <AvailableTimesSkeleton key={i} />)
|
||||||
date={dayjs(slots.date)}
|
: slotsPerDay.length > 0 &&
|
||||||
showTimeFormatToggle={!isColumnView}
|
slotsPerDay.map((slots) => (
|
||||||
availableMonth={
|
<AvailableTimes
|
||||||
dayjs(selectedDate).format("MM") !== dayjs(slots.date).format("MM")
|
className="w-full"
|
||||||
? dayjs(slots.date).format("MMM")
|
key={slots.date}
|
||||||
: undefined
|
showTimeFormatToggle={!isColumnView}
|
||||||
}
|
onTimeSelect={onTimeSelect}
|
||||||
/>
|
date={dayjs(slots.date)}
|
||||||
))}
|
slots={slots.slots}
|
||||||
</div>
|
seatsPerTimeSlot={seatsPerTimeSlot}
|
||||||
<div
|
showAvailableSeatsCount={showAvailableSeatsCount}
|
||||||
ref={containerRef}
|
availableMonth={
|
||||||
className={classNames(
|
dayjs(selectedDate).format("MM") !== dayjs(slots.date).format("MM")
|
||||||
limitHeight && "scroll-bar flex-grow overflow-auto md:h-[400px]",
|
? dayjs(slots.date).format("MMM")
|
||||||
!limitHeight && "flex h-full w-full flex-row gap-4"
|
: undefined
|
||||||
)}>
|
}
|
||||||
{schedule.isLoading
|
/>
|
||||||
? // Shows exact amount of days as skeleton.
|
))}
|
||||||
Array.from({ length: 1 + (extraDays ?? 0) }).map((_, i) => <AvailableTimesSkeleton key={i} />)
|
</div>
|
||||||
: slotsPerDay.length > 0 &&
|
|
||||||
slotsPerDay.map((slots) => (
|
|
||||||
<AvailableTimes
|
|
||||||
className="scroll-bar w-full overflow-auto"
|
|
||||||
key={slots.date}
|
|
||||||
showTimeFormatToggle={!isColumnView}
|
|
||||||
onTimeSelect={onTimeSelect}
|
|
||||||
slots={slots.slots}
|
|
||||||
seatsPerTimeSlot={seatsPerTimeSlot}
|
|
||||||
showAvailableSeatsCount={showAvailableSeatsCount}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,16 +1,22 @@
|
||||||
import { CalendarX2 } from "lucide-react";
|
import { CalendarX2 } from "lucide-react";
|
||||||
|
import { shallow } from "zustand/shallow";
|
||||||
|
|
||||||
|
import type { Dayjs } from "@calcom/dayjs";
|
||||||
import dayjs from "@calcom/dayjs";
|
import dayjs from "@calcom/dayjs";
|
||||||
import type { Slots } from "@calcom/features/schedules";
|
import type { Slots } from "@calcom/features/schedules";
|
||||||
import { classNames } from "@calcom/lib";
|
import { classNames } from "@calcom/lib";
|
||||||
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
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 { Button, SkeletonText } from "@calcom/ui";
|
||||||
|
|
||||||
import { useBookerStore } from "../Booker/store";
|
import { useBookerStore } from "../Booker/store";
|
||||||
import { useTimePreferences } from "../lib";
|
import { useTimePreferences } from "../lib";
|
||||||
import { SeatsAvailabilityText } from "./SeatsAvailabilityText";
|
import { SeatsAvailabilityText } from "./SeatsAvailabilityText";
|
||||||
|
import { TimeFormatToggle } from "./TimeFormatToggle";
|
||||||
|
|
||||||
type AvailableTimesProps = {
|
type AvailableTimesProps = {
|
||||||
|
date: Dayjs;
|
||||||
slots: Slots[string];
|
slots: Slots[string];
|
||||||
onTimeSelect: (
|
onTimeSelect: (
|
||||||
time: string,
|
time: string,
|
||||||
|
@ -22,25 +28,58 @@ type AvailableTimesProps = {
|
||||||
showAvailableSeatsCount?: boolean | null;
|
showAvailableSeatsCount?: boolean | null;
|
||||||
showTimeFormatToggle?: boolean;
|
showTimeFormatToggle?: boolean;
|
||||||
className?: string;
|
className?: string;
|
||||||
|
availableMonth?: string | undefined;
|
||||||
selectedSlots?: string[];
|
selectedSlots?: string[];
|
||||||
};
|
};
|
||||||
|
|
||||||
export const AvailableTimes = ({
|
export const AvailableTimes = ({
|
||||||
|
date,
|
||||||
slots,
|
slots,
|
||||||
onTimeSelect,
|
onTimeSelect,
|
||||||
seatsPerTimeSlot,
|
seatsPerTimeSlot,
|
||||||
showAvailableSeatsCount,
|
showAvailableSeatsCount,
|
||||||
showTimeFormatToggle = true,
|
showTimeFormatToggle = true,
|
||||||
className,
|
className,
|
||||||
|
availableMonth,
|
||||||
selectedSlots,
|
selectedSlots,
|
||||||
}: AvailableTimesProps) => {
|
}: AvailableTimesProps) => {
|
||||||
const { t, i18n } = useLocale();
|
const { t, i18n } = useLocale();
|
||||||
const [timeFormat, timezone] = useTimePreferences((state) => [state.timeFormat, state.timezone]);
|
const [timeFormat, timezone] = useTimePreferences((state) => [state.timeFormat, state.timezone]);
|
||||||
const bookingData = useBookerStore((state) => state.bookingData);
|
const bookingData = useBookerStore((state) => state.bookingData);
|
||||||
const hasTimeSlots = !!seatsPerTimeSlot;
|
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 (
|
return (
|
||||||
<div className={classNames("text-default flex flex-col", className)}>
|
<div className={classNames("text-default flex flex-col", className)}>
|
||||||
|
<header className="bg-default before:bg-default dark:bg-muted dark:before:bg-muted mb-3 flex w-full flex-row items-center font-medium">
|
||||||
|
<span
|
||||||
|
className={classNames(
|
||||||
|
isColumnView && "w-full text-center",
|
||||||
|
isColumnView ? "text-subtle text-xs uppercase" : "text-emphasis font-semibold"
|
||||||
|
)}>
|
||||||
|
<span className={classNames(isToday && "!text-default")}>
|
||||||
|
{nameOfDay(i18n.language, Number(date.format("d")), "short")}
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
className={classNames(
|
||||||
|
isColumnView && isToday && "bg-brand-default text-brand ml-2",
|
||||||
|
"inline-flex items-center justify-center rounded-3xl px-1 pt-0.5 font-medium",
|
||||||
|
isMonthView ? "text-default text-sm" : "text-xs"
|
||||||
|
)}>
|
||||||
|
{date.format("DD")}
|
||||||
|
{availableMonth && `, ${availableMonth}`}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
{showTimeFormatToggle && (
|
||||||
|
<div className="ml-auto rtl:mr-auto">
|
||||||
|
<TimeFormatToggle />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</header>
|
||||||
<div className="h-full pb-4">
|
<div className="h-full pb-4">
|
||||||
{!slots.length && (
|
{!slots.length && (
|
||||||
<div className="bg-subtle border-subtle flex h-full flex-col items-center rounded-md border p-6 dark:bg-transparent">
|
<div className="bg-subtle border-subtle flex h-full flex-col items-center rounded-md border p-6 dark:bg-transparent">
|
||||||
|
|
|
@ -1,60 +0,0 @@
|
||||||
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 (
|
|
||||||
<header className="bg-default before:bg-default dark:bg-muted dark:before:bg-muted mb-3 flex w-full flex-row items-center font-medium">
|
|
||||||
<span
|
|
||||||
className={classNames(
|
|
||||||
isColumnView && "w-full text-center",
|
|
||||||
isColumnView ? "text-subtle text-xs uppercase" : "text-emphasis font-semibold"
|
|
||||||
)}>
|
|
||||||
<span className={classNames(isToday && "!text-default")}>
|
|
||||||
{nameOfDay(i18n.language, Number(date.format("d")), "short")}
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
className={classNames(
|
|
||||||
isColumnView && isToday && "bg-brand-default text-brand ml-2",
|
|
||||||
"inline-flex items-center justify-center rounded-3xl px-1 pt-0.5 font-medium",
|
|
||||||
isMonthView ? "text-default text-sm" : "text-xs"
|
|
||||||
)}>
|
|
||||||
{date.format("DD")}
|
|
||||||
{availableMonth && `, ${availableMonth}`}
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
{showTimeFormatToggle && (
|
|
||||||
<div className="ml-auto rtl:mr-auto">
|
|
||||||
<TimeFormatToggle />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</header>
|
|
||||||
);
|
|
||||||
};
|
|
|
@ -6,4 +6,3 @@ export {
|
||||||
EventTitle,
|
EventTitle,
|
||||||
} from "./components/event-meta";
|
} from "./components/event-meta";
|
||||||
export { AvailableTimes, AvailableTimesSkeleton } from "./components/AvailableTimes";
|
export { AvailableTimes, AvailableTimesSkeleton } from "./components/AvailableTimes";
|
||||||
export { AvailableTimesHeader } from "./components/AvailableTimesHeader";
|
|
||||||
|
|
|
@ -10,7 +10,6 @@ import { shallow } from "zustand/shallow";
|
||||||
|
|
||||||
import type { Dayjs } from "@calcom/dayjs";
|
import type { Dayjs } from "@calcom/dayjs";
|
||||||
import dayjs from "@calcom/dayjs";
|
import dayjs from "@calcom/dayjs";
|
||||||
import { AvailableTimesHeader } from "@calcom/features/bookings";
|
|
||||||
import { AvailableTimes } from "@calcom/features/bookings";
|
import { AvailableTimes } from "@calcom/features/bookings";
|
||||||
import { useBookerStore, useInitializeBookerStore } from "@calcom/features/bookings/Booker/store";
|
import { useBookerStore, useInitializeBookerStore } from "@calcom/features/bookings/Booker/store";
|
||||||
import { useEvent, useScheduleForEvent } from "@calcom/features/bookings/Booker/utils/event";
|
import { useEvent, useScheduleForEvent } from "@calcom/features/bookings/Booker/utils/event";
|
||||||
|
@ -249,9 +248,9 @@ const EmailEmbed = ({ eventType, username }: { eventType?: EventType; username:
|
||||||
<div className="mt-[9px] font-medium ">
|
<div className="mt-[9px] font-medium ">
|
||||||
{selectedDate ? (
|
{selectedDate ? (
|
||||||
<div className="flex h-full w-full flex-row gap-4">
|
<div className="flex h-full w-full flex-row gap-4">
|
||||||
<AvailableTimesHeader date={dayjs(selectedDate)} />
|
|
||||||
<AvailableTimes
|
<AvailableTimes
|
||||||
className="w-full"
|
className="w-full"
|
||||||
|
date={dayjs(selectedDate)}
|
||||||
selectedSlots={
|
selectedSlots={
|
||||||
eventType.slug &&
|
eventType.slug &&
|
||||||
selectedDatesAndTimes &&
|
selectedDatesAndTimes &&
|
||||||
|
|
Loading…
Reference in New Issue