diff --git a/apps/web/components/booking/pages/AvailabilityPage.tsx b/apps/web/components/booking/pages/AvailabilityPage.tsx index e4d79fe18d..d4d1dca257 100644 --- a/apps/web/components/booking/pages/AvailabilityPage.tsx +++ b/apps/web/components/booking/pages/AvailabilityPage.tsx @@ -10,10 +10,10 @@ import { z } from "zod"; import { AppStoreLocationType, LocationObject, LocationType } from "@calcom/app-store/locations"; import dayjs, { Dayjs } from "@calcom/dayjs"; import { - useIsEmbed, - useEmbedStyles, useEmbedNonStylesConfig, + useEmbedStyles, useIsBackgroundTransparent, + useIsEmbed, } from "@calcom/embed-core/embed-iframe"; import { useContracts } from "@calcom/features/ee/web3/contexts/contractsContext"; import CustomBranding from "@calcom/lib/CustomBranding"; @@ -36,6 +36,7 @@ import { isBrandingHidden } from "@lib/isBrandingHidden"; import AvailableTimes from "@components/booking/AvailableTimes"; import TimeOptions from "@components/booking/TimeOptions"; +import EventTypeDescriptionSafeHTML from "@components/eventtype/EventTypeDescriptionSafeHTML"; import { HeadSeo } from "@components/seo/head-seo"; import AvatarGroup from "@components/ui/AvatarGroup"; import PoweredByCal from "@components/ui/PoweredByCal"; @@ -431,10 +432,12 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
{eventType?.description && ( -

- - {eventType.description} -

+
+
+ +
+ +
)} {eventType?.requiresConfirmation && (

@@ -574,7 +577,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {

-

{eventType.description}

+
)} {eventType?.requiresConfirmation && ( diff --git a/apps/web/components/eventtype/EventTypeDescriptionSafeHTML.tsx b/apps/web/components/eventtype/EventTypeDescriptionSafeHTML.tsx new file mode 100644 index 0000000000..d60a64019c --- /dev/null +++ b/apps/web/components/eventtype/EventTypeDescriptionSafeHTML.tsx @@ -0,0 +1,12 @@ +export type EventTypeDescriptionSafeProps = { + eventType: { description: string | null }; +}; + +export const EventTypeDescriptionSafeHTML = ({ eventType }: EventTypeDescriptionSafeProps) => { + const props: JSX.IntrinsicElements["div"] = { suppressHydrationWarning: true }; + // @ts-expect-error: @see packages/prisma/middleware/eventTypeDescriptionParseAndSanitize.ts + if (eventType.description) props.dangerouslySetInnerHTML = { __html: eventType.descriptionAsSafeHTML }; + return
; +}; + +export default EventTypeDescriptionSafeHTML; diff --git a/apps/web/package.json b/apps/web/package.json index 1e9d74e124..59b25182cc 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -76,6 +76,7 @@ "kbar": "^0.1.0-beta.36", "libphonenumber-js": "^1.9.53", "lodash": "^4.17.21", + "markdown-it": "^13.0.1", "memory-cache": "^0.2.0", "micro": "^9.3.4", "mime-types": "^2.1.35", @@ -131,6 +132,7 @@ "@types/glidejs__glide": "^3.4.2", "@types/jest": "^27.5.1", "@types/lodash": "^4.14.182", + "@types/markdown-it": "^12.2.3", "@types/memory-cache": "^0.2.2", "@types/micro": "7.3.6", "@types/mime-types": "^2.1.1", diff --git a/apps/web/pages/event-types/[type].tsx b/apps/web/pages/event-types/[type].tsx index 537527e8a4..008a3c4940 100644 --- a/apps/web/pages/event-types/[type].tsx +++ b/apps/web/pages/event-types/[type].tsx @@ -1469,7 +1469,7 @@ const EventTypePage = (props: inferSSRProps) => { />