fix: Dynamic duration was always overwritten with the default (30) (#12444)

Co-authored-by: Omar López <zomars@me.com>
Co-authored-by: Morgan <33722304+ThyMinimalDev@users.noreply.github.com>

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<typeof getServerSideProps> & 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 (
     <main className={getBookerWrapperClasses({ isEmbed: !!isEmbed })}>
       <BookerSeo
@@ -46,7 +54,7 @@ export default function Type({
         rescheduleUid={rescheduleUid ?? undefined}
         hideBranding={isBrandingHidden}
         isSEOIndexable={isSEOIndexable ?? true}
-        entity={entity}
+        entity={eventData.entity}
         bookingData={booking}
       />
       <Booker
@@ -55,8 +63,16 @@ export default function Type({
         bookingData={booking}
         isAway={away}
         hideBranding={isBrandingHidden}
-        entity={entity}
-        duration={duration}
+        entity={eventData.entity}
+        durationConfig={eventData.metadata?.multipleDuration}
+        /* TODO: Currently unused, evaluate it is needed-
+         *       Possible alternative approach is to have onDurationChange.
+         */
+        duration={getMultipleDurationValue(
+          eventData.metadata?.multipleDuration,
+          searchParams?.get("duration"),
+          eventData.length
+        )}
       />
     </main>
   );
@@ -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,

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(() => {

packages/features/bookings/Booker/store.ts

@@ -256,14 +256,12 @@ export const useBookerStore = create<BookerStore>((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

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.
    */