diff --git a/packages/features/bookings/Booker/Booker.tsx b/packages/features/bookings/Booker/Booker.tsx
index d87ba27de1..b69f11f83e 100644
--- a/packages/features/bookings/Booker/Booker.tsx
+++ b/packages/features/bookings/Booker/Booker.tsx
@@ -447,15 +447,11 @@ const BookerComponent = ({
)}
- {!isPlatform ? (
- setSelectedTimeslot(null)}
- visible={bookerState === "booking" && shouldShowFormInDialog}>
- {EventBooker}
-
- ) : (
- <>>
- )}
+ setSelectedTimeslot(null)}
+ visible={bookerState === "booking" && shouldShowFormInDialog}>
+ {EventBooker}
+
>
);
};
diff --git a/packages/features/bookings/Booker/components/BookEventForm/BookFormAsModal.tsx b/packages/features/bookings/Booker/components/BookEventForm/BookFormAsModal.tsx
index cb8d2273b0..34b9faac81 100644
--- a/packages/features/bookings/Booker/components/BookEventForm/BookFormAsModal.tsx
+++ b/packages/features/bookings/Booker/components/BookEventForm/BookFormAsModal.tsx
@@ -1,6 +1,7 @@
import { Calendar, Clock } from "lucide-react";
import type { ReactNode } from "react";
+import { useIsPlatform, useGetEventTypeById } from "@calcom/atoms/monorepo";
import dayjs from "@calcom/dayjs";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Badge, Dialog, DialogContent } from "@calcom/ui";
@@ -9,11 +10,42 @@ import { useTimePreferences } from "../../../lib";
import { useBookerStore } from "../../store";
import { useEvent } from "../../utils/event";
-const BookEventFormWrapper = ({ children }: { onCancel: () => void; children: ReactNode }) => {
+const BookEventFormWrapper = ({ children, onCancel }: { onCancel: () => void; children: ReactNode }) => {
+ const { data } = useEvent();
+
+ return ;
+};
+
+const PlatformBookEventFormWrapper = ({
+ children,
+ onCancel,
+}: {
+ onCancel: () => void;
+ children: ReactNode;
+}) => {
+ const eventId = useBookerStore((state) => state.eventId);
+ const { data } = useGetEventTypeById(eventId);
+
+ return (
+
+ );
+};
+
+export const BookEventFormWrapperComponent = ({
+ child,
+ eventLength,
+}: {
+ onCancel: () => void;
+ child: ReactNode;
+ eventLength?: number;
+}) => {
const { t } = useLocale();
const selectedTimeslot = useBookerStore((state) => state.selectedTimeslot);
const selectedDuration = useBookerStore((state) => state.selectedDuration);
- const { data } = useEvent();
const parsedSelectedTimeslot = dayjs(selectedTimeslot);
const { timeFormat, timezone } = useTimePreferences();
if (!selectedTimeslot) {
@@ -28,13 +60,13 @@ const BookEventFormWrapper = ({ children }: { onCancel: () => void; children: Re
{parsedSelectedTimeslot.format("LL")} {parsedSelectedTimeslot.tz(timezone).format(timeFormat)}
- {(selectedDuration || data?.length) && (
+ {(selectedDuration || eventLength) && (
- {selectedDuration || data?.length}
+ {selectedDuration || eventLength}
)}
- {children}
+ {child}
>
);
};
@@ -48,13 +80,19 @@ export const BookFormAsModal = ({
onCancel: () => void;
children: ReactNode;
}) => {
+ const isPlatform = useIsPlatform();
+
return (
);
diff --git a/packages/platform/atoms/hooks/event-types/useGetEventTypeById.ts b/packages/platform/atoms/hooks/event-types/useGetEventTypeById.ts
new file mode 100644
index 0000000000..c950eae553
--- /dev/null
+++ b/packages/platform/atoms/hooks/event-types/useGetEventTypeById.ts
@@ -0,0 +1,27 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { BASE_URL, API_VERSION, V2_ENDPOINTS, SUCCESS_STATUS } from "@calcom/platform-constants";
+import type { EventType as AtomEventType } from "@calcom/platform-libraries";
+import type { ApiResponse, ApiSuccessResponse } from "@calcom/platform-types";
+
+import http from "../../lib/http";
+
+export const QUERY_KEY = "get-event-by-id";
+export const useGetEventTypeById = (id: number | null) => {
+ const endpoint = new URL(BASE_URL);
+
+ endpoint.pathname = `api/${API_VERSION}/${V2_ENDPOINTS.eventTypes}/${id}`;
+ endpoint.searchParams.set("for", "atom");
+
+ return useQuery({
+ queryKey: [QUERY_KEY, id],
+ queryFn: () => {
+ return http?.get>(endpoint.toString()).then((res) => {
+ if (res.data.status === SUCCESS_STATUS) {
+ return (res.data as ApiSuccessResponse).data;
+ }
+ throw new Error(res.data.error.message);
+ });
+ },
+ });
+};
diff --git a/packages/platform/atoms/index.ts b/packages/platform/atoms/index.ts
index 6a395e1132..67d8fad9ba 100644
--- a/packages/platform/atoms/index.ts
+++ b/packages/platform/atoms/index.ts
@@ -6,6 +6,7 @@ export { useIsPlatform } from "./hooks/useIsPlatform";
export { useAtomsContext } from "./hooks/useAtomsContext";
export { useConnectedCalendars } from "./hooks/useConnectedCalendars";
export { useEventTypesPublic } from "./hooks/event-types/useEventTypesPublic";
+export { useGetEventTypeById } from "./hooks/event-types/useGetEventTypeById";
export { useCancelBooking } from "./hooks/useCancelBooking";
export { useGetBooking } from "./hooks/useGetBooking";
export { useGetBookings } from "./hooks/useGetBookings";
diff --git a/packages/platform/atoms/monorepo.ts b/packages/platform/atoms/monorepo.ts
index 60b8a3489a..2ceac91fd7 100644
--- a/packages/platform/atoms/monorepo.ts
+++ b/packages/platform/atoms/monorepo.ts
@@ -3,6 +3,7 @@ export { WebAvailabilitySettingsWrapper as AvailabilitySettings } from "./availa
export { CalProvider } from "./cal-provider/CalProvider";
export { useIsPlatform } from "./hooks/useIsPlatform";
export { useAtomsContext } from "./hooks/useAtomsContext";
+export { useGetEventTypeById } from "./hooks/event-types/useGetEventTypeById";
export { useHandleBookEvent } from "./hooks/useHandleBookEvent";
export * as Dialog from "./src/components/ui/dialog";
export { Timezone } from "./timezone";