From 3850b519fd0c5c2a7d19b4cf1afe7ae114a28a08 Mon Sep 17 00:00:00 2001
From: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
Date: Wed, 26 Feb 2025 21:13:17 +0530
Subject: [PATCH] fix: time slot doesn't select in email embed (#19523)

Co-authored-by: Tushar Bhatt <95581504+TusharBhatt1@users.noreply.github.com>
---
 packages/features/bookings/components/AvailableTimes.tsx | 3 ++-
 packages/features/embed/Embed.tsx                        | 6 ++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/features/bookings/components/AvailableTimes.tsx b/packages/features/bookings/components/AvailableTimes.tsx
index b9f84e37ee..f36921a641 100644
--- a/packages/features/bookings/components/AvailableTimes.tsx
+++ b/packages/features/bookings/components/AvailableTimes.tsx
@@ -55,7 +55,7 @@ type SlotItemProps = {
   slot: Slot;
   seatsPerTimeSlot?: number | null;
   selectedSlots?: string[];
-  onTimeSelect: TOnTimeSelect;
+  onTimeSelect?: TOnTimeSelect;
   onTentativeTimeSelect?: TOnTentativeTimeSelect;
   showAvailableSeatsCount?: boolean | null;
   event: {
@@ -201,6 +201,7 @@ const SlotItem = ({
                   StartIcon={layout === "column_view" ? "chevron-right" : undefined}
                   type="button"
                   onClick={() =>
+                    onTimeSelect &&
                     onTimeSelect(slot.time, slot?.attendees || 0, seatsPerTimeSlot, slot.bookingUid)
                   }
                   data-testid="skip-confirm-book-button"
diff --git a/packages/features/embed/Embed.tsx b/packages/features/embed/Embed.tsx
index 59fca8e601..d9cdfc2afe 100644
--- a/packages/features/embed/Embed.tsx
+++ b/packages/features/embed/Embed.tsx
@@ -14,6 +14,7 @@ import { AvailableTimes, AvailableTimesHeader } from "@calcom/features/bookings"
 import { useBookerStore, useInitializeBookerStore } from "@calcom/features/bookings/Booker/store";
 import { useEvent, useScheduleForEvent } from "@calcom/features/bookings/Booker/utils/event";
 import DatePicker from "@calcom/features/calendars/DatePicker";
+import type { Slot } from "@calcom/features/schedules";
 import { useNonEmptyScheduleDays } from "@calcom/features/schedules";
 import { useSlotsForDate } from "@calcom/features/schedules/lib/use-schedule/useSlotsForDate";
 import { APP_NAME, DEFAULT_LIGHT_BRAND_COLOR, DEFAULT_DARK_BRAND_COLOR } from "@calcom/lib/constants";
@@ -286,7 +287,8 @@ const EmailEmbed = ({
   });
   const nonEmptyScheduleDays = useNonEmptyScheduleDays(schedule?.data?.slots);
 
-  const onTimeSelect = (time: string) => {
+  const handleSlotClick = (slot: Slot) => {
+    const { time } = slot;
     if (!eventType) {
       return null;
     }
@@ -393,7 +395,7 @@ const EmailEmbed = ({
                     ? selectedDatesAndTimes[eventType.slug][selectedDate as string]
                     : undefined
                 }
-                onTimeSelect={onTimeSelect}
+                handleSlotClick={handleSlotClick}
                 slots={slots}
                 showAvailableSeatsCount={eventType.seatsShowAvailabilityCount}
                 event={event}