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 ( - {children} + {!isPlatform ? ( + {children} + ) : ( + {children} + )} ); 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";