diff --git a/apps/web/pages/[user]/[type].tsx b/apps/web/pages/[user]/[type].tsx index b9b7293353..96b2482bf8 100644 --- a/apps/web/pages/[user]/[type].tsx +++ b/apps/web/pages/[user]/[type].tsx @@ -1,15 +1,12 @@ import type { GetServerSidePropsContext } from "next"; +import { useSearchParams } from "next/navigation"; import { z } from "zod"; import { Booker } from "@calcom/atoms"; import { getServerSession } from "@calcom/features/auth/lib/getServerSession"; import { getBookerWrapperClasses } from "@calcom/features/bookings/Booker/utils/getBookerWrapperClasses"; import { BookerSeo } from "@calcom/features/bookings/components/BookerSeo"; -import { - getBookingForReschedule, - getBookingForSeatedEvent, - getMultipleDurationValue, -} from "@calcom/features/bookings/lib/get-booking"; +import { getBookingForReschedule, getBookingForSeatedEvent } from "@calcom/features/bookings/lib/get-booking"; import type { GetBookingType } from "@calcom/features/bookings/lib/get-booking"; import { orgDomainConfig, userOrgQuery } from "@calcom/features/ee/organizations/lib/orgDomains"; import { getUsernameList } from "@calcom/lib/defaultEvents"; @@ -26,6 +23,16 @@ import { getTemporaryOrgRedirect } from "../../lib/getTemporaryOrgRedirect"; export type PageProps = inferSSRProps & EmbedProps; +export const getMultipleDurationValue = ( + multipleDurationConfig: number[] | undefined, + queryDuration: string | string[] | null | undefined, + defaultValue: number +) => { + if (!multipleDurationConfig) return null; + if (multipleDurationConfig.includes(Number(queryDuration))) return Number(queryDuration); + return defaultValue; +}; + export default function Type({ slug, user, @@ -35,9 +42,10 @@ export default function Type({ isBrandingHidden, isSEOIndexable, rescheduleUid, - entity, - duration, + eventData, }: PageProps) { + const searchParams = useSearchParams(); + return (
); @@ -68,7 +84,7 @@ Type.PageWrapper = PageWrapper; async function getDynamicGroupPageProps(context: GetServerSidePropsContext) { const session = await getServerSession(context); const { user: usernames, type: slug } = paramsSchema.parse(context.params); - const { rescheduleUid, bookingUid, duration: queryDuration } = context.query; + const { rescheduleUid, bookingUid } = context.query; const { ssrInit } = await import("@server/lib/ssr"); const ssr = await ssrInit(context); @@ -120,12 +136,14 @@ async function getDynamicGroupPageProps(context: GetServerSidePropsContext) { return { props: { - entity: eventData.entity, - duration: getMultipleDurationValue( - eventData.metadata?.multipleDuration, - queryDuration, - eventData.length - ), + eventData: { + entity: eventData.entity, + length: eventData.length, + metadata: { + ...eventData.metadata, + multipleDuration: [15, 30, 60], + }, + }, booking, user: usernames.join("+"), slug, @@ -144,7 +162,7 @@ async function getUserPageProps(context: GetServerSidePropsContext) { const session = await getServerSession(context); const { user: usernames, type: slug } = paramsSchema.parse(context.params); const username = usernames[0]; - const { rescheduleUid, bookingUid, duration: queryDuration } = context.query; + const { rescheduleUid, bookingUid } = context.query; const { currentOrgDomain, isValidOrgDomain } = orgDomainConfig(context.req, context.params?.orgSlug); const isOrgContext = currentOrgDomain && isValidOrgDomain; @@ -207,15 +225,14 @@ async function getUserPageProps(context: GetServerSidePropsContext) { return { props: { booking, - duration: getMultipleDurationValue( - eventData.metadata?.multipleDuration, - queryDuration, - eventData.length - ), + eventData: { + entity: eventData.entity, + length: eventData.length, + metadata: eventData.metadata, + }, away: user?.away, user: username, slug, - entity: eventData.entity, trpcState: ssr.dehydrate(), isBrandingHidden: user?.hideBranding, isSEOIndexable: user?.allowSEOIndexing, diff --git a/packages/features/bookings/Booker/Booker.tsx b/packages/features/bookings/Booker/Booker.tsx index 38acbb194b..fe3a1d85bb 100644 --- a/packages/features/bookings/Booker/Booker.tsx +++ b/packages/features/bookings/Booker/Booker.tsx @@ -43,6 +43,7 @@ const BookerComponent = ({ hideBranding = false, isTeamEvent, entity, + durationConfig, duration, hashedLink, }: BookerProps) => { @@ -147,7 +148,7 @@ const BookerComponent = ({ layout: defaultLayout, isTeamEvent, org: entity.orgSlug, - durationConfig: event?.data?.metadata?.multipleDuration, + durationConfig, }); useEffect(() => { diff --git a/packages/features/bookings/Booker/store.ts b/packages/features/bookings/Booker/store.ts index 04a995edca..fae38dfb88 100644 --- a/packages/features/bookings/Booker/store.ts +++ b/packages/features/bookings/Booker/store.ts @@ -256,14 +256,12 @@ export const useBookerStore = create((set, get) => ({ (["week_view", "column_view"].includes(layout) ? dayjs().format("YYYY-MM-DD") : null), }); - if (eventId) { - if (durationConfig?.includes(Number(getQueryParam("duration")))) { - set({ - selectedDuration: Number(getQueryParam("duration")), - }); - } else { - removeQueryParam("duration"); - } + if (durationConfig?.includes(Number(getQueryParam("duration")))) { + set({ + selectedDuration: Number(getQueryParam("duration")), + }); + } else { + removeQueryParam("duration"); } // Unset selected timeslot if user is rescheduling. This could happen diff --git a/packages/features/bookings/Booker/types.ts b/packages/features/bookings/Booker/types.ts index badfe667c8..e36c2c2d8e 100644 --- a/packages/features/bookings/Booker/types.ts +++ b/packages/features/bookings/Booker/types.ts @@ -64,6 +64,10 @@ export interface BookerProps { * otherwise, the default value is selected */ duration?: number | null; + /** + * Configures the selectable options for a multiDuration event type. + */ + durationConfig?: number[]; /** * Refers to the private link from event types page. */