fix: random multiple duration value input [CAL-887] (#10513)

apps/web/components/Embed.tsx

@@ -1010,6 +1010,7 @@ const EmailEmbed = ({ eventType, username }: { eventType?: EventType; username:
     eventSlug: eventType?.slug ?? "",
     eventId: eventType?.id,
     layout: BookerLayouts.MONTH_VIEW,
+    durationConfig: eventType?.metadata?.multipleDuration,
   });
 
   const [month, selectedDate, selectedDatesAndTimes] = useBookerStore(

packages/features/bookings/Booker/Booker.tsx

@@ -100,6 +100,7 @@ const BookerComponent = ({
     layout: defaultLayout,
     isTeamEvent,
     org: entity.orgSlug,
+    durationConfig: event?.data?.metadata?.multipleDuration,
   });
 
   useEffect(() => {

packages/features/bookings/Booker/store.ts

@@ -6,7 +6,7 @@ import { BookerLayouts } from "@calcom/prisma/zod-utils";
 
 import type { GetBookingType } from "../lib/get-booking";
 import type { BookerState, BookerLayout } from "./types";
-import { updateQueryParam, getQueryParam } from "./utils/query-param";
+import { updateQueryParam, getQueryParam, removeQueryParam } from "./utils/query-param";
 
 /**
  * Arguments passed into store initializer, containing
@@ -25,6 +25,7 @@ type StoreInitializeType = {
   verifiedEmail?: string | null;
   rescheduleUid?: string | null;
   seatReferenceUid?: string;
+  durationConfig?: number[] | null;
   org?: string | null;
 };
 
@@ -76,6 +77,10 @@ export type BookerStore = {
    */
   selectedDatesAndTimes: { [key: string]: { [key: string]: string[] } } | null;
   setSelectedDatesAndTimes: (selectedDatesAndTimes: { [key: string]: { [key: string]: string[] } }) => void;
+  /**
+   * Multiple duration configuration
+   */
+  durationConfig: number[] | null;
   /**
    * Selected event duration in minutes.
    */
@@ -210,6 +215,7 @@ export const useBookerStore = create<BookerStore>((set, get) => ({
     bookingData = null,
     layout,
     isTeamEvent,
+    durationConfig,
     org,
   }: StoreInitializeType) => {
     const selectedDateInStore = get().selectedDate;
@@ -235,12 +241,23 @@ export const useBookerStore = create<BookerStore>((set, get) => ({
       bookingData,
       layout: layout || BookerLayouts.MONTH_VIEW,
       isTeamEvent: isTeamEvent || false,
+      durationConfig,
       // Preselect today's date in week / column view, since they use this to show the week title.
       selectedDate:
         selectedDateInStore ||
         (["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");
+      }
+    }
+
     // Unset selected timeslot if user is rescheduling. This could happen
     // if the user reschedules a booking right after the confirmation page.
     // In that case the time would still be store in the store, this way we
@@ -249,7 +266,8 @@ export const useBookerStore = create<BookerStore>((set, get) => ({
     if (month) set({ month });
     //removeQueryParam("layout");
   },
-  selectedDuration: Number(getQueryParam("duration")) || null,
+  durationConfig: null,
+  selectedDuration: null,
   setSelectedDuration: (selectedDuration: number | null) => {
     set({ selectedDuration });
     updateQueryParam("duration", selectedDuration ?? "");
@@ -282,6 +300,7 @@ export const useInitializeBookerStore = ({
   verifiedEmail = null,
   layout,
   isTeamEvent,
+  durationConfig,
   org,
 }: StoreInitializeType) => {
   const initializeStore = useBookerStore((state) => state.initialize);
@@ -297,6 +316,7 @@ export const useInitializeBookerStore = ({
       isTeamEvent,
       org,
       verifiedEmail,
+      durationConfig,
     });
   }, [
     initializeStore,
@@ -310,5 +330,6 @@ export const useInitializeBookerStore = ({
     layout,
     isTeamEvent,
     verifiedEmail,
+    durationConfig,
   ]);
 };