maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Hide EventTypeDetails when configured (#9633)

This commit is contained in:
Hariom Balhara 2023-06-21 12:58:21 +05:30 committed by GitHub
parent 69c9f690cb
commit 5acb3a09e5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 32 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/features/bookings/Booker/Booker.tsx
View File

@ -4,6 +4,7 @@ import { useEffect, useRef, useMemo } from "react";
import StickyBox from "react-sticky-box";
import { shallow } from "zustand/shallow";
import { useEmbedUiConfig } from "@calcom/embed-core/embed-iframe";
import classNames from "@calcom/lib/classNames";
import useMediaQuery from "@calcom/lib/hooks/useMediaQuery";
import { BookerLayouts, defaultBookerLayoutSettings } from "@calcom/prisma/zod-utils";
@ -103,6 +104,9 @@ const BookerComponent = ({
}
}, [layout]);
const embedUiConfig = useEmbedUiConfig();
const hideEventTypeDetails = isEmbed ? embedUiConfig.hideEventTypeDetails : false;
if (event.isSuccess && !event.data) {
return <NotFound />;
}
@ -114,7 +118,7 @@ const BookerComponent = ({
ref={animationScope}
className={classNames(
// Sets booker size css variables for the size of all the columns.
...getBookerSizeClassNames(layout, bookerState),
...getBookerSizeClassNames(layout, bookerState, hideEventTypeDetails),
"bg-default dark:bg-muted grid max-w-full items-start dark:[color-scheme:dark] sm:transition-[width] sm:duration-300 sm:motion-reduce:transition-none md:flex-row",
layout === BookerLayouts.MONTH_VIEW && "border-subtle rounded-md border",
!isEmbed && "sm:transition-[width] sm:duration-300",

8
packages/features/bookings/Booker/components/EventMeta.tsx
View File

@ -1,6 +1,7 @@
import { m } from "framer-motion";
import dynamic from "next/dynamic";
import { useEmbedUiConfig, useIsEmbed } from "@calcom/embed-core/embed-iframe";
import { EventDetails, EventMembers, EventMetaSkeleton, EventTitle } from "@calcom/features/bookings";
import { EventMetaBlock } from "@calcom/features/bookings/components/event-meta/Details";
import { useTimePreferences } from "@calcom/features/bookings/lib";
@ -25,6 +26,13 @@ export const EventMeta = () => {
const rescheduleBooking = useBookerStore((state) => state.rescheduleBooking);
const { i18n, t } = useLocale();
const { data: event, isLoading } = useEvent();
const embedUiConfig = useEmbedUiConfig();
const isEmbed = useIsEmbed();
const hideEventTypeDetails = isEmbed ? embedUiConfig.hideEventTypeDetails : false;
if (hideEventTypeDetails) {
return null;
}
return (
<div className="relative z-10 p-6">

25
packages/features/bookings/Booker/config.ts
View File

@ -112,25 +112,38 @@ export const resizeAnimationConfig: ResizeAnimationConfig = {
},
};
export const getBookerSizeClassNames = (layout: BookerLayout, bookerState: BookerState) => {
export const getBookerSizeClassNames = (
layout: BookerLayout,
bookerState: BookerState,
hideEventTypeDetails = false
) => {
const getBookerMetaClass = (className: string) => {
if (hideEventTypeDetails) {
return "";
}
return className;
};
return [
// Size settings are abstracted on their own lines purely for readbility.
// Size settings are abstracted on their own lines purely for readability.
// General sizes, used always
"[--booker-timeslots-width:240px] lg:[--booker-timeslots-width:280px]",
// Small calendar defaults
layout === BookerLayouts.MONTH_VIEW && "[--booker-meta-width:240px]",
layout === BookerLayouts.MONTH_VIEW && getBookerMetaClass("[--booker-meta-width:240px]"),
// Meta column get's wider in booking view to fit the full date on a single row in case
// of a multi occurance event. Also makes form less wide, which also looks better.
layout === BookerLayouts.MONTH_VIEW &&
bookerState === "booking" &&
"[--booker-main-width:420px] lg:[--booker-meta-width:340px]",
`[--booker-main-width:420px] ${getBookerMetaClass("lg:[--booker-meta-width:340px]")}`,
// Smaller meta when not in booking view.
layout === BookerLayouts.MONTH_VIEW &&
bookerState !== "booking" &&
"[--booker-main-width:480px] lg:[--booker-meta-width:280px]",
`[--booker-main-width:480px] ${getBookerMetaClass("lg:[--booker-meta-width:280px]")}`,
// Fullscreen view settings.
layout !== BookerLayouts.MONTH_VIEW &&
"[--booker-main-width:480px] [--booker-meta-width:340px] lg:[--booker-meta-width:424px]",
`[--booker-main-width:480px] [--booker-meta-width:340px] ${getBookerMetaClass(
"lg:[--booker-meta-width:424px]"
)}`,
];
};