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

305-314: Critical: Direct singleton store usage breaks widget isolation.

The error handler still uses useBookerStore.setState() directly, which breaks the isolation between multiple Booker widget instances. When an error occurs in one widget, it would update the state of all widgets on the page.

This needs to use the context-based store's setters instead:

-        useBookerStore.setState({
-          rescheduleUid: error.data?.rescheduleUid,
-        });
-        useBookerStore.setState({
-          bookingData: {
-            uid: error.data?.rescheduleUid,
-            startTime: error.data?.startTime,
-            attendees: error.data?.attendees,
-          } as unknown as GetBookingType,
-        });

You'll need to access the setters from the context:

const setRescheduleUid = useBookerStoreContext((state) => state.setRescheduleUid);
const setBookingData = useBookerStoreContext((state) => state.setBookingData);

Then use them in the error handler. However, since these setters aren't exposed in the current store interface, you may need to add them first.

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

96-103: Avoid state updates during render; move to useEffect

Calling moveToNextMonthOnNoAvailability() directly in render can trigger state updates during render when isLoading is false, causing React warnings and potential loops.

-  const { moveToNextMonthOnNoAvailability } = useMoveToNextMonthOnNoAvailability({
+  const { moveToNextMonthOnNoAvailability } = useMoveToNextMonthOnNoAvailability({
     browsingDate,
     nonEmptyScheduleDays,
     onMonthChange,
     isLoading: isLoading ?? true,
   });
-  moveToNextMonthOnNoAvailability();
+  // Run after render to avoid setState during render
+  useEffect(() => {
+    if (!(isLoading ?? true)) {
+      moveToNextMonthOnNoAvailability();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [browsingDate.format("YYYY-MM"), JSON.stringify(nonEmptyScheduleDays), isLoading]);

---

145-145: Handle null selectedDate to avoid invalid Dayjs instance

Passing dayjs(selectedDate) when selectedDate is null yields an invalid instance. Pass null explicitly to keep downstream logic clean.

-      selected={dayjs(selectedDate)}
+      selected={selectedDate ? dayjs(selectedDate) : null}

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

143-155: Fix stale closure in reservation interval when duration changes

The effect depends on event?.id and timeSlotToBeBooked, but handleReserveSlot also uses eventDuration. If the user changes duration after selecting a slot, the interval will keep using the old duration.

-  }, [event?.id, timeSlotToBeBooked]);
+  }, [event?.id, timeSlotToBeBooked, eventDuration]);

Optionally, for tighter correctness without frequent interval resets, store latest values in refs and read them inside the interval callback. I can provide that refactor if you prefer.

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

160-170: Localize the button label inside ServerTrans

Direct text “Please select a new time” violates the localization guideline. Use t() or let the i18n key provide the label.

-                    <button
+                    <button
                       key="please-select-a-new-time-button"
                       type="button"
                       className="underline"
                       onClick={onCancel}>
-                      Please select a new time
+                      {t("please_select_a_new_time")}
                     </button>,

If timeslot_unavailable_book_a_new_time already includes the button text, pass an empty button and let the translation control the content:

-                    <button ...>{t("please_select_a_new_time")}</button>,
+                    <button ... />

---

176-198: Localize anchor labels for Terms and Privacy Policy

Maintain consistency with the later block that uses t("terms") and t("privacy_policy").

-                  Terms
+                  {t("terms")}
@@
-                  Privacy Policy.
+                  {t("privacy_policy")}

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

187-191: Add error handling for localStorage operations

localStorage operations can fail in certain environments (e.g., private browsing, storage quota exceeded). Consider wrapping these calls in try-catch blocks.

       if (state) {
         current.set("overlayCalendar", "true");
-        localStorage.setItem("overlayCalendarSwitchDefault", "true");
+        try {
+          localStorage.setItem("overlayCalendarSwitchDefault", "true");
+        } catch (e) {
+          console.warn("Failed to persist overlay calendar preference:", e);
+        }
       } else {
         current.delete("overlayCalendar");
-        localStorage.removeItem("overlayCalendarSwitchDefault");
+        try {
+          localStorage.removeItem("overlayCalendarSwitchDefault");
+        } catch (e) {
+          console.warn("Failed to remove overlay calendar preference:", e);
+        }
       }

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

111-128: Critical: still subscribing to the legacy global store

This effect uses useBookerStore.subscribe and useBookerStore.getState, tying onBookerStateChange to the singleton store. With multiple widgets, callbacks will receive state changes from other instances.

Refactor to derive values from the context store state instead. One approach: select the entire store state via context, filter out functions, and debounce callbacks. Example diff:

-  const prevStateRef = useRef<BookerStoreValues | null>(null);
-  const getStateValues = useCallback(
-    (state: ReturnType<typeof useBookerStore.getState>): BookerStoreValues => {
-      return Object.fromEntries(
-        Object.entries(state).filter(([_, value]) => typeof value !== "function")
-      ) as BookerStoreValues;
-    },
-    []
-  );
-  const debouncedStateChange = useMemo(() => {
+  const prevStateRef = useRef<BookerStoreValues | null>(null);
+  const getStateValues = useCallback(
+    (state: any): BookerStoreValues => {
+      return Object.fromEntries(
+        Object.entries(state).filter(([_, value]) => typeof value !== "function")
+      ) as BookerStoreValues;
+    },
+    []
+  );
+  const debouncedStateChange = useMemo(() => {
     return debounce(
       (currentStateValues: BookerStoreValues, callback: (values: BookerStoreValues) => void) => {
         const prevState = prevStateRef.current;
         const stateChanged = !prevState || JSON.stringify(prevState) !== JSON.stringify(currentStateValues);
 
         if (stateChanged) {
           callback(currentStateValues);
           prevStateRef.current = currentStateValues;
         }
       },
       50
     );
   }, []);
 
-  useEffect(() => {
-    if (!onBookerStateChange) return;
-
-    const unsubscribe = useBookerStore.subscribe((state) => {
-      const currentStateValues = getStateValues(state);
-      debouncedStateChange(currentStateValues, onBookerStateChange);
-    });
-
-    // Initial call with current state
-    const initialState = getStateValues(useBookerStore.getState());
-    onBookerStateChange(initialState);
-    prevStateRef.current = initialState;
-
-    return () => {
-      unsubscribe();
-      debouncedStateChange.cancel();
-    };
-  }, [onBookerStateChange, getStateValues, debouncedStateChange]);
+  // Read full state snapshot from the context store
+  const contextStoreState = useBookerStoreContext((s) => s);
+
+  useEffect(() => {
+    if (!onBookerStateChange) return;
+    const currentValues = getStateValues(contextStoreState);
+    debouncedStateChange(currentValues, onBookerStateChange);
+    return () => {
+      debouncedStateChange.cancel();
+    };
+  }, [contextStoreState, onBookerStateChange, getStateValues, debouncedStateChange]);

And drop the legacy import:

- import { useBookerStore, useInitializeBookerStore } from "@calcom/features/bookings/Booker/store";
+ // remove useBookerStore import

If you prefer subscribe semantics for fine-grained control, consider exporting a useBookerStoreApi() from the provider to access the underlying StoreApi for subscribe within the provider context.

---

17-17: Remove legacy store imports to avoid accidental coupling

The file still imports useBookerStore and useInitializeBookerStore from the legacy store. Remove them once the above refactors are applied to prevent regressions back to the global singleton.

-import { useBookerStore, useInitializeBookerStore } from "@calcom/features/bookings/Booker/store";
+// Legacy store imports removed; using context-based store exclusively

packages/features/bookings/Booker/__tests__/Booker.test.tsx (5)

13-13: React import is optional with the new JSX runtime

If your tsconfig uses "jsx": "react-jsx", you can drop this import. Harmless either way.

---

23-23: Avoid any in the framer-motion mock

You can preserve types by using typeof import("framer-motion"). Also, since the mock returns the actual module unchanged, consider removing the mock if it’s not needed.

-  const actual = (await importOriginal()) as any;
+  const actual = (await importOriginal()) as typeof import("framer-motion");
   return {
     ...actual,
   };

If this mock is truly a no-op in your environment, you can delete the entire vi.mock block to reduce noise.

---

196-203: Timezone-stable selectedDate

You’re mixing a date-only value ("2024-01-01") with UTC timestamps ("...Z"). If selectedDate is parsed relative to local TZ anywhere, this can lead to flaky tests. Consider normalizing to UTC or using a date-only parsing path explicitly.

Example:

-        selectedDate: "2024-01-01",
+        // Keep tests TZ-agnostic; use an explicit UTC start-of-day if the code parses selectedDate as a Date
+        selectedDate: "2024-01-01T00:00:00Z",

Or ensure the code treats selectedDate as a plain date string (no implicit Date parsing).

---

38-38: Silence noisy console in test mock

The console.log in BookEventForm mock adds noise to CI logs.

-    console.log("BookEventForm Called", { isTimeslotUnavailable, onCancel });
+    // Intentionally silent to keep test logs clean

---

223-223: Remove debugging helper from test run

screen.logTestingPlaygroundURL() is great locally but noisy in CI.

-    screen.logTestingPlaygroundURL();
+    // screen.logTestingPlaygroundURL();

.changeset/fresh-rivers-glow.md (1)

5-5: Fix grammatical error in changeset description.

There's a typo in the description.

-Fixes an issues for the Booker atom wherein when multiple widgets were being placed on the same page, changes made in one widget would also get reflected in the others.
+Fixes an issue for the Booker atom wherein when multiple widgets were being placed on the same page, changes made in one widget would also get reflected in the others.

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

305-314: Consider the approach for error state management.

Since rescheduleUid is typically set through the initialize function and there's no dedicated setter, you might need to either:

1. Add explicit setters for rescheduleUid and update the store interface
2. Use a different pattern for error recovery that doesn't involve direct state manipulation
3. Store error-specific state separately from the main booking state

packages/features/calendars/__tests__/DatePicker.test.tsx (1)

20-35: Reduce wrapper repetition via a local render helper

Minor DX: factor the nested providers into a small helper to avoid duplication and ease future changes.

+const renderWithProviders = (ui: React.ReactNode) =>
+  render(
+    <BookerStoreProvider>
+      <TooltipProvider>{ui}</TooltipProvider>
+    </BookerStoreProvider>
+  );
@@
-    const { getByTestId } = render(
-      <BookerStoreProvider>
-        <TooltipProvider>
-          <DatePicker
-            onChange={noop}
-            browsingDate={testDate}
-            locale="en"
-            periodData={{
-              periodType: PeriodType.UNLIMITED,
-              periodDays: null,
-              periodCountCalendarDays: false,
-              periodStartDate: null,
-              periodEndDate: null,
-            }}
-          />
-        </TooltipProvider>
-      </BookerStoreProvider>
-    );
+    const { getByTestId } = renderWithProviders(
+      <DatePicker
+        onChange={noop}
+        browsingDate={testDate}
+        locale="en"
+        periodData={{
+          periodType: PeriodType.UNLIMITED,
+          periodDays: null,
+          periodCountCalendarDays: false,
+          periodStartDate: null,
+          periodEndDate: null,
+        }}
+      />
+    );

Also applies to: 46-51, 61-66, 95-113, 139-157, 179-197

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

507-518: Non-localized error strings (informational)

These thrown "Function not implemented." strings are developer-facing, not user-visible. No action required, but if they can bubble to UI, wrap with t() per guidelines for TSX files.

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