diff --git a/packages/features/embed/Embed.tsx b/packages/features/embed/Embed.tsx index 1784fec9d6..59fca8e601 100644 --- a/packages/features/embed/Embed.tsx +++ b/packages/features/embed/Embed.tsx @@ -2,7 +2,7 @@ import { Collapsible, CollapsibleContent } from "@radix-ui/react-collapsible"; import classNames from "classnames"; import { useSession } from "next-auth/react"; import { usePathname, useRouter } from "next/navigation"; -import type { RefObject } from "react"; +import type { RefObject, Dispatch, SetStateAction } from "react"; import { createRef, useRef, useState } from "react"; import type { ControlProps } from "react-select"; import { components } from "react-select"; @@ -233,12 +233,16 @@ const EmailEmbed = ({ username, orgSlug, isTeamEvent, + selectedDuration, + setSelectedDuration, userSettingsTimezone, }: { eventType?: EventType; username: string; orgSlug?: string; isTeamEvent: boolean; + selectedDuration: number | undefined; + setSelectedDuration: Dispatch>; userSettingsTimezone?: string; }) => { const { t, i18n } = useLocale(); @@ -274,7 +278,12 @@ const EmailEmbed = ({ shallow ); const event = useEvent(); - const schedule = useScheduleForEvent({ orgSlug, eventId: eventType?.id, isTeamEvent }); + const schedule = useScheduleForEvent({ + orgSlug, + eventId: eventType?.id, + isTeamEvent, + duration: selectedDuration, + }); const nonEmptyScheduleDays = useNonEmptyScheduleDays(schedule?.data?.slots); const onTimeSelect = (time: string) => { @@ -334,6 +343,15 @@ const EmailEmbed = ({ if (!eventType) { return null; } + if (!selectedDuration) { + setSelectedDuration(eventType.length); + } + + const multipleDurations = eventType?.metadata?.multipleDuration ?? []; + const durationsOptions = multipleDurations.map((duration) => ({ + label: `${duration} ${t("minutes")}`, + value: duration, + })); return (
@@ -388,12 +406,23 @@ const EmailEmbed = ({
{t("duration")}
- {t("minutes")}} - /> + {durationsOptions.length > 0 ? ( + + value={durationsOptions.find((option) => option.value === selectedDuration)} + options={durationsOptions} + onChange={(option) => { + setSelectedDuration(option?.value); + setSelectedDatesAndTimes({}); + }} + /> + ) : ( + {t("minutes")}} + /> + )}
@@ -416,6 +445,7 @@ const EmailEmbedPreview = ({ month, selectedDateAndTime, calLink, + selectedDuration, userSettingsTimezone, }: { eventType: EventType; @@ -425,6 +455,7 @@ const EmailEmbedPreview = ({ month?: string; selectedDateAndTime: { [key: string]: string[] }; calLink: string; + selectedDuration: number | undefined; userSettingsTimezone?: string; }) => { const { t } = useLocale(); @@ -472,7 +503,7 @@ const EmailEmbedPreview = ({ lineHeight: "17px", color: "#333333", }}> - {t("duration")}: {eventType.length} mins + {t("duration")}: {selectedDuration} mins
@@ -534,9 +565,9 @@ const EmailEmbedPreview = ({ // So we add 'team/' to the url. const bookingURL = `${eventType.bookerUrl}/${ eventType.teamId !== null ? "team/" : "" - }${username}/${eventType.slug}?duration=${ - eventType.length - }&date=${key}&month=${month}&slot=${time}&cal.tz=${timezone}`; + }${username}/${ + eventType.slug + }?duration=${selectedDuration}&date=${key}&month=${month}&slot=${time}&cal.tz=${timezone}`; return ( embed.type === embedType); + const [selectedDuration, setSelectedDuration] = useState(eventTypeData?.eventType.length); const [isEmbedCustomizationOpen, setIsEmbedCustomizationOpen] = useState(true); const [isBookingCustomizationOpen, setIsBookingCustomizationOpen] = useState(true); @@ -895,6 +927,8 @@ const EmbedTypeCodeAndPreviewDialogContent = ({ userSettingsTimezone={userSettings?.timeZone} orgSlug={data?.user?.org?.slug} isTeamEvent={!!teamSlug} + selectedDuration={selectedDuration} + setSelectedDuration={setSelectedDuration} /> ) : (
@@ -1238,6 +1272,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({