From 02c5aa02df6d7f88a07a522ebe98cb0479b20d34 Mon Sep 17 00:00:00 2001
From: Leo Giovanetti <hello@leog.me>
Date: Wed, 2 Aug 2023 11:37:59 -0300
Subject: [PATCH] fix: random multiple duration value input [CAL-887] (#10513)

---
 apps/web/components/Embed.tsx                |  1 +
 packages/features/bookings/Booker/Booker.tsx |  1 +
 packages/features/bookings/Booker/store.ts   | 25 ++++++++++++++++++--
 3 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/apps/web/components/Embed.tsx b/apps/web/components/Embed.tsx
index 8372db4ec6..5e2944cb7e 100644
--- a/apps/web/components/Embed.tsx
+++ b/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(
diff --git a/packages/features/bookings/Booker/Booker.tsx b/packages/features/bookings/Booker/Booker.tsx
index 124fb8b4d4..11a8855f3f 100644
--- a/packages/features/bookings/Booker/Booker.tsx
+++ b/packages/features/bookings/Booker/Booker.tsx
@@ -100,6 +100,7 @@ const BookerComponent = ({
     layout: defaultLayout,
     isTeamEvent,
     org: entity.orgSlug,
+    durationConfig: event?.data?.metadata?.multipleDuration,
   });
 
   useEffect(() => {
diff --git a/packages/features/bookings/Booker/store.ts b/packages/features/bookings/Booker/store.ts
index dcc2e1fba5..17a2e8d86b 100644
--- a/packages/features/bookings/Booker/store.ts
+++ b/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,
   ]);
 };