packages/features/bookings/components/AvailableTimes.tsx (1)

271-274: Bug: empty slots cause crash due to Array.every on empty array

Array.every returns true on empty arrays; when slots is empty, this returns OOOSlot spreading undefined (runtime error).

Apply this diff:

-  const oooAllDay = slots.every((slot) => slot.away);
+  const oooAllDay = slots.length > 0 && slots.every((slot) => slot.away);

This preserves the later !slots.length UI while preventing an early return with undefined props.

packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarSwitch.tsx (2)

63-73: Add accessible name to icon-only Button

Icon-only buttons need an accessible label. Please add an aria-label (localized).

Apply this diff:

         <Button
           size="base"
           data-testid="overlay-calendar-settings-button"
           variant="icon"
           color="secondary"
           StartIcon="settings"
+          aria-label={t("settings")}
           onClick={() => {
             setCalendarSettingsOverlay(true);
           }}
         />

---

19-22: Fix global overlay store – isolate per Booker instance

I confirmed that useOverlayCalendarStore is created at the module level in
packages/features/bookings/Booker/components/OverlayCalendar/store.ts via Zustand’s create(). This means all Booker widgets on the same page share the same overlay state:

• Global store export (useOverlayCalendarStore = create(...))
• No enclosing Provider/context to scope it per instance

To prevent cross-instance bleed when multiple widgets are rendered:

• Introduce an instance-scoped store factory and provider, e.g.:

• Create createOverlayCalendarStore()
• Implement OverlayCalendarStoreProvider (mirroring BookerStoreProvider)
• Expose a useOverlayCalendarStoreContext() hook that pulls from React context

• Update all imports of useOverlayCalendarStore in:

• OverlayCalendarSwitch.tsx
• LargeCalendar.tsx
• any hooks under Booker/components/hooks/

to use the new context-scoped hook.

• Alternatively, fold overlay modal state into the existing Booker store if that better fits the architecture.

packages/features/bookings/Booker/components/BookEventForm/BookFormAsModal.tsx (1)

30-31: The previous review comment is still valid - add enabled guard to prevent null requests.

The hook useEventTypeById(eventId) is called with eventId that can be null/undefined during initial render, causing requests to /eventTypes/null. This issue persists with the context-based store migration.

Apply this fix to prevent unnecessary API calls:

-  const { data } = useEventTypeById(eventId);
+  const { data } = useEventTypeById(eventId, {
+    enabled: Boolean(eventId),
+  });

packages/features/bookings/Booker/components/hooks/useBookerLayout.ts (2)

49-61: Avoid shadowing outer “layout” variable inside effect

The local const layout in this effect shadows the outer layout, making the code harder to read and reason about. Rename it to layoutParam.

   //setting layout from query param
   useEffect(() => {
-    const layout = getQueryParam("layout") as BookerLayouts;
+    const layoutParam = getQueryParam("layout") as BookerLayouts;
     if (
       !isMobile &&
       !isEmbed &&
-      validateLayout(layout) &&
+      validateLayout(layoutParam) &&
       bookerLayouts?.enabledLayouts?.length &&
-      layout !== _layout
+      layoutParam !== _layout
     ) {
-      const validLayout = bookerLayouts.enabledLayouts.find((userLayout) => userLayout === layout);
+      const validLayout = bookerLayouts.enabledLayouts.find((userLayout) => userLayout === layoutParam);
       validLayout && setLayout(validLayout);
     }
   }, [bookerLayouts, setLayout, _layout, isEmbed, isMobile]);

---

21-21: Naming nit: prefer storeLayout over _layout

Underscore prefix is easy to miss. storeLayout better communicates intent and improves readability across this hook.

-  const [_layout, setLayout] = useBookerStoreContext((state) => [state.layout, state.setLayout], shallow);
+  const [storeLayout, setLayout] = useBookerStoreContext((state) => [state.layout, state.setLayout], shallow);
@@
-  const layout = isEmbed ? (isMobile ? "mobile" : validateLayout(embedUiConfig.layout) || _layout) : _layout;
+  const layout = isEmbed ? (isMobile ? "mobile" : validateLayout(embedUiConfig.layout) || storeLayout) : storeLayout;
@@
-      layout !== _layout
+      layout !== storeLayout
     ) {
-      const validLayout = bookerLayouts.enabledLayouts.find((userLayout) => userLayout === layout);
-      validLayout && setLayout(validLayout);
+      const validLayout = bookerLayouts.enabledLayouts.find((userLayout) => userLayout === layout);
+      validLayout && setLayout(validLayout);
     }
-  }, [bookerLayouts, setLayout, _layout, isEmbed, isMobile]);
+  }, [bookerLayouts, setLayout, storeLayout, isEmbed, isMobile]);

Also applies to: 28-28, 56-61

packages/features/bookings/components/AvailableTimesHeader.tsx (1)

31-31: Simplify selector; shallow array is unnecessary for a primitive

layout is a primitive; using an array with shallow equality adds overhead without benefit. Select the primitive directly.

Apply this diff:

-import { shallow } from "zustand/shallow";
@@
-  const [layout] = useBookerStoreContext((state) => [state.layout], shallow);
+  const layout = useBookerStoreContext((state) => state.layout);

packages/features/bookings/components/AvailableTimes.tsx (5)

115-116: Reduce re-renders: consolidate store selections with shallow

You’re creating three subscriptions. Combine them into a single selector with shallow to avoid redundant renders.

Apply this diff:

+import { shallow } from "zustand/shallow";
@@
-  const bookingData = useBookerStoreContext((state) => state.bookingData);
-  const layout = useBookerStoreContext((state) => state.layout);
+  const [bookingData, layout, selectedTimeslot] = useBookerStoreContext(
+    (state) => [state.bookingData, state.layout, state.selectedTimeslot],
+    shallow
+  );
@@
-  const selectedTimeslot = useBookerStoreContext((state) => state.selectedTimeslot);

Also applies to: 130-130

---

247-249: Localize user-facing text per guidelines

"Busy" should use t() for localization.

Apply this diff:

-                      <p>Busy</p>
+                      <p>{t("busy")}</p>

---

208-210: Prefer enum over string literal for layout checks

Using the typed enum improves safety against typos and future refactors.

Apply this diff and add the import:

+import { BookerLayouts } from "@calcom/prisma/zod-utils";
@@
-                  variant={layout === "column_view" ? "icon" : "button"}
-                  StartIcon={layout === "column_view" ? "chevron-right" : undefined}
+                  variant={layout === BookerLayouts.COLUMN_VIEW ? "icon" : "button"}
+                  StartIcon={layout === BookerLayouts.COLUMN_VIEW ? "chevron-right" : undefined}

---

283-291: Nit: standardize test id attribute

Use data-testid (lowercase) consistently to match testing conventions and avoid selector mismatches.

Apply this diff:

-          <div
-            data-testId="no-slots-available"
+          <div
+            data-testid="no-slots-available"

---

118-129: Watch Day.js usage in hot paths

This block runs per SlotItem render. If slot counts are high, consider computing nowDate/usersTimezoneDate/offset once in AvailableTimes and passing down, or memoizing where possible.

If you see perf regressions with many slots, hoist:

• const nowDate = dayjs();
• const usersTimezoneDate = nowDate.tz(timezone);
• const offset = (usersTimezoneDate.utcOffset() - nowDate.utcOffset()) / 60;

…to AvailableTimes and pass offset via props.

packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarSwitch.tsx (1)

17-25: Keep Switch controlled: default enabled to a boolean

When enabled is undefined, checked={switchEnabled} can make the Switch uncontrolled. Defaulting to false prevents React warnings and ensures consistent behavior.

Apply this diff:

-export function OverlayCalendarSwitch({ enabled, hasSession, onStateChange }: OverlayCalendarSwitchProps) {
+export function OverlayCalendarSwitch({ enabled = false, hasSession, onStateChange }: OverlayCalendarSwitchProps) {
   const { t } = useLocale();
   const setContinueWithProvider = useOverlayCalendarStore((state) => state.setContinueWithProviderModal);
   const setCalendarSettingsOverlay = useOverlayCalendarStore(
     (state) => state.setCalendarSettingsOverlayModal
   );
-  const layout = useBookerStoreContext((state) => state.layout);
-  const switchEnabled = enabled;
+  const layout = useBookerStoreContext((state) => state.layout);
+  const switchEnabled = Boolean(enabled);

packages/platform/atoms/availability/AvailabilitySettings.tsx (1)

676-691: Could not locate or inspect packages/features/calendars/DatePicker.tsx to confirm usage of Booker context in override components. Please verify that the DatePicker (and any nested components) consume the Booker store (e.g., via useBookerStoreContext or initialization hooks) to justify the Provider wrapper.

packages/features/bookings/Booker/components/LargeCalendar.tsx (2)

73-73: Localize user-facing text (“Busy”)

Per guidelines for TSX, wrap user-facing strings with t(). Replace the hardcoded "Busy" with a localized string (e.g., t("busy")), consistent with the app’s i18n utilities.

---

42-51: Consider Day.js overhead in loops

This map runs per timeslot and calls dayjs twice per item. If schedule.slots is large or recomputes frequently, consider micro-optimizing: either precompute with native Date arithmetic or use dayjs.utc() in hot paths to avoid time zone churn. Not blocking, just a performance note aligned with the repo guideline.

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

packages/features/bookings/Booker/Booker.tsx (1)

231-305: Missing useMemo dependencies cause stale timeslot and props in BookEventForm

EventBooker depends on selectedTimeslot (passed to BookEventForm and used to compute isTimeslotUnavailable), confirmButtonDisabled, customClassNames, isInstantMeeting, and schedule (used in onCancel) but these aren’t in the dependency array. This can keep the form from updating when selecting a different slot and leave other props stale.

Add the missing dependencies:

   }, [
     bookerFormErrorRef,
     instantVideoMeetingUrl,
     bookerState,
     bookingForm,
     errors,
     event,
     expiryTime,
     extraOptions,
     formErrors,
     handleBookEvent,
     handleVerifyEmail,
     key,
     loadingStates,
     onGoBackInstantMeeting,
     renderConfirmNotVerifyEmailButtonCond,
     seatedEventData,
     setSeatedEventData,
     setSelectedTimeslot,
     isPlatform,
     shouldRenderCaptcha,
     isVerificationCodeSending,
     unavailableTimeSlots,
+    selectedTimeslot,
+    confirmButtonDisabled,
+    customClassNames,
+    isInstantMeeting,
+    schedule,
   ]);

packages/platform/atoms/booker/BookerPlatformWrapper.tsx (3)

9-13: Remove legacy store imports; use only context APIs

You're now using the context-based store. Keep imports from BookerStoreProvider and drop the legacy singleton imports to avoid accidental cross-instance coupling and unused imports.

Apply:

 import {
   BookerStoreProvider,
   useInitializeBookerStoreContext,
   useBookerStoreContext,
 } from "@calcom/features/bookings/Booker/BookerStoreProvider";
-import { useBookerStore, useInitializeBookerStore } from "@calcom/features/bookings/Booker/store";
+import type { BookerStore } from "@calcom/features/bookings/Booker/store";

#!/bin/bash
# Verify no lingering legacy singleton imports remain across the repo
rg -n --no-heading $'@calcom/features/bookings/Booker/store' | rg -n --no-heading 'useBookerStore\\(|useInitializeBookerStore\\(' || true

# Verify all context-based imports are used within a Provider
rg -n --no-heading $'useBookerStoreContext\\(|useInitializeBookerStoreContext\\(' -A 2 -B 2
rg -n --no-heading $'BookerStoreProvider'

Also applies to: 17-17

---

182-197: Double initialization: remove legacy useInitializeBookerStore to prevent cross-widget leaks

You correctly initialize via useInitializeBookerStoreContext here. However, you still call the legacy useInitializeBookerStore above. That reintroduces the global singleton and can leak state between widgets.

Action:

• Delete the legacy initializer block above (Lines 166–181).
• With the import cleanup suggested earlier, this avoids initializing the global store entirely.

Remove the following block (shown for clarity):

useInitializeBookerStore({
  ...props,
  teamMemberEmail,
  crmAppSlug,
  crmOwnerRecordType,
  crmRecordId: props.crmRecordId,
  eventId: event?.data?.id,
  rescheduleUid: props.rescheduleUid ?? null,
  bookingUid: props.bookingUid ?? null,
  layout: layout,
  org: props.entity?.orgSlug,
  username,
  bookingData,
  isPlatform: true,
  allowUpdatingUrlParams,
});

---

72-75: Stop subscribing to the legacy global store in onBookerStateChange; scope it to the context store

The effect still uses useBookerStore.subscribe/getState and types getStateValues off the legacy store, which breaks isolation across widgets. Select from the context-scoped store instead.

Follow-up changes:

• Type the selector against the store type.
• Drive the callback using a context selector so it only reacts to this instance’s state.

Add the type import (already suggested in imports comment):

import type { BookerStore } from "@calcom/features/bookings/Booker/store";

Update the selector typing:

const getStateValues = useCallback((state: BookerStore): BookerStoreValues => {
  return Object.fromEntries(Object.entries(state).filter(([_, v]) => typeof v !== "function")) as BookerStoreValues;
}, []);

Replace the effect with a context-scoped subscription:

const scopedStateValues = useBookerStoreContext(getStateValues);

useEffect(() => {
  if (!onBookerStateChange) return;
  // Initial call and subsequent debounced updates scoped to this provider
  debouncedStateChange(scopedStateValues, onBookerStateChange);
  return () => {
    debouncedStateChange.cancel();
  };
}, [scopedStateValues, onBookerStateChange, debouncedStateChange]);

Also applies to: 90-96, 112-129

packages/features/embed/Embed.tsx (2)

14-19: Don’t mix context-based reader with legacy initializer; remove useInitializeBookerStore import

You’ve added BookerStoreProvider and context hooks (good), but still import the legacy useInitializeBookerStore. This can mutate a different, global store and break isolation.

Apply:

 import {
   BookerStoreProvider,
   useInitializeBookerStoreContext,
   useBookerStoreContext,
 } from "@calcom/features/bookings/Booker/BookerStoreProvider";
-import { useInitializeBookerStore } from "@calcom/features/bookings/Booker/store";

---

268-275: Initialize via context only (correct)

Using useInitializeBookerStoreContext with username/eventSlug/eventId/layout/org/isTeamEvent is the right approach. Remove the legacy initializer call above (Lines 260–267) to avoid double-initialization.

Apply removal inside EmailEmbed:

-  useInitializeBookerStore({
-    username,
-    eventSlug: eventType?.slug ?? "",
-    eventId: eventType?.id,
-    layout: BookerLayouts.MONTH_VIEW,
-    org: orgSlug,
-    isTeamEvent,
-  });

packages/features/bookings/Booker/Booker.tsx (1)

408-414: Confirm EventMeta accepts and consumes selectedTimeslot

You’re passing selectedTimeslot to EventMeta. Ensure its props include selectedTimeslot?: string | null and that it’s used inside the component as intended.

Run:

#!/bin/bash
# Check EventMeta props for `selectedTimeslot`
rg -n 'type .*EventMeta.*Props|interface .*EventMeta.*Props' -A15 packages/features/bookings/Booker/components/EventMeta.tsx
rg -n --fixed-strings 'selectedTimeslot' packages/features/bookings/Booker/components/EventMeta.tsx

packages/features/bookings/Booker/components/hooks/useBookerTime.ts (1)

9-9: Simplify the selector: select the primitive directly and drop shallow.

You’re selecting a single primitive; the extra array allocation and shallow compare are unnecessary. Zustand’s default equality for primitives is sufficient.

Apply this diff within the current line range:

-  const [timezoneFromBookerStore] = useBookerStoreContext((state) => [state.timezone], shallow);
+  const timezoneFromBookerStore = useBookerStoreContext((state) => state.timezone);

And remove the (now unused) import at the top of this file:

// Remove this import
import { shallow } from "zustand/shallow";

packages/platform/atoms/booker/BookerPlatformWrapper.tsx (1)

198-199: Nit: avoid selecting unused setter to reduce re-render noise

You select setDayCount but never use it. Select only dayCount.

-const [dayCount] = useBookerStoreContext((state) => [state.dayCount, state.setDayCount], shallow);
+const dayCount = useBookerStoreContext((state) => state.dayCount);

packages/features/bookings/Booker/Booker.tsx (2)

93-94: Avoid double subscriptions by selecting value and setter together

You’re subscribing twice to the store for selectedDate and setSelectedDate. Combine them into a single selector tuple with shallow to reduce subscriptions.

Apply this diff:

-const selectedDate = useBookerStoreContext((state) => state.selectedDate);
-const setSelectedDate = useBookerStoreContext((state) => state.setSelectedDate);
+const [selectedDate, setSelectedDate] = useBookerStoreContext(
+  (state) => [state.selectedDate, state.setSelectedDate],
+  shallow
+);

---

195-198: Stabilize the time-slot select handler with useCallback

onAvailableTimeSlotSelect is recreated on every render which can cause extra rerenders downstream. Wrap it in useCallback.

Apply this diff:

-  const onAvailableTimeSlotSelect = (time: string) => {
-    setSelectedTimeslot(time);
-  };
+  const onAvailableTimeSlotSelect = useCallback((time: string) => {
+    setSelectedTimeslot(time);
+  }, [setSelectedTimeslot]);

Add this import at the top (outside the selected range):

import { useCallback, useEffect, useMemo, useRef } from "react";

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

packages/features/troubleshooter/Troubleshooter.tsx (2)

31-33: CSS variable name typo breaks layout on non-lg breakpoints

The CSS custom property is misspelled as --troublehooster-meta-width but referenced as --troubleshooter-meta-width (and correctly set for lg: only). This causes gridTemplateColumns to reference an undefined variable on mobile/tablet, likely breaking the layout.

Apply this diff to fix the variable name consistently:

-            ? "[--troublehooster-meta-width:0px]"
-            : "[--troublehooster-meta-width:250px] lg:[--troubleshooter-meta-width:430px]"
+            ? "[--troubleshooter-meta-width:0px]"
+            : "[--troubleshooter-meta-width:250px] lg:[--troubleshooter-meta-width:430px]"

---

57-59: Invalid Tailwind arbitrary value class: use ml-[-1px]

ml[-1px] is invalid Tailwind syntax; it should be ml-[-1px]. This class currently won’t apply.

Apply this diff:

-          <div className="ml[-1px] border-subtle  sticky top-0 [grid-area:main]">
+          <div className="ml-[-1px] border-subtle sticky top-0 [grid-area:main]">

packages/features/troubleshooter/Troubleshooter.tsx (1)

21-23: Nit: fix hook name typo for consistency

Consider renaming useInitalizeTroubleshooterStore to useInitializeTroubleshooterStore for clarity and consistency across the codebase. If you proceed, update the import on Line 8 and all call sites.

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

packages/features/bookings/Booker/components/Section.tsx (1)

47-54: Rename local variable to avoid confusion with framer-motion’s layout prop

Using layout as a local variable while also setting the layout prop on <m.div> is easy to misread. Rename the local variable for clarity.

-  const layout = useBookerStoreContext((state) => state.layout);
+  const currentLayout = useBookerStoreContext((state) => state.layout);
@@
-    gridClassName = gridAreaClassNameMap[area[layout] || area.default];
+    gridClassName = gridAreaClassNameMap[area[currentLayout] || area.default];

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these settings in your CodeRabbit configuration.