fix: multiple widgets for Booker atom (#22925)

* fix manage test error

* fix manage test error

* update useBookerContext

* wrap store provider around booker

* replace useStore with useBookerStoreContext

* replace useBookerStore with useBookerStoreContext

* add initializer function for booker store provider

* update props

* fixup: pass more props

* export StoreInitializeType type

* replace useBookerStore with useBookerStoreContext

* fixup: dont wrap BookerStoreProvider around booker directly

* wrap BookerStoreProvider around booker web wrapper and fix local storage import

* fix: wrap test components with BookerStoreProvider to fix failing unit tests

- Create reusable test utility in test-utils.tsx with comprehensive mock store
- Update Booker.test.tsx to use context-based testing approach
- Fix DatePicker tests in both bookings and calendars packages
- Simulate auto-advance behavior for month navigation tests
- All 14 previously failing tests now pass

Co-Authored-By: [email protected] <[email protected]>

* add changesets

* fix: complete migration from useBookerStore to useBookerStoreContext

- Updated all remaining files to use useBookerStoreContext instead of useBookerStore
- Fixed BookingFields.test.tsx by wrapping test component with BookerStoreProvider
- Ensures all Booker components work within the new context-based store pattern
- Resolves failing unit tests in CI by completing the store migration

Co-Authored-By: [email protected] <[email protected]>

* fix: add missing useBookerStoreContext import in BookerWebWrapper.tsx

- Fixes TypeScript errors in CI where useBookerStoreContext was used but not imported
- Completes the migration from useBookerStore to useBookerStoreContext pattern
- All tests pass locally after this fix

Co-Authored-By: [email protected] <[email protected]>

* Revert "fix: add missing useBookerStoreContext import in BookerWebWrapper.tsx"

This reverts commit 12947ca.

* Revert "fix: complete migration from useBookerStore to useBookerStoreContext"

This reverts commit 87d837f.

* fixup: useBookerStoreContext and useInitializeBookerStoreContext for booker web wrapper

* fixup: failing E2E tests

* fixup: email embed breaking

* fixup: troubleshooter crashing

* replace useBookerstore with useBookerStoreContext

---------

Co-authored-by: Rajiv Sahal <[email protected]>
Co-authored-by: Ryukemeister <[email protected]>
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: Benny Joo <[email protected]>

Author: 4 people

.changeset/fresh-rivers-glow.md

@@ -0,0 +1,6 @@
+---
+"@calcom/atoms": patch
+---
+
+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.
+

packages/features/bookings/Booker/Booker.tsx

@@ -10,6 +10,7 @@ import dayjs from "@calcom/dayjs";
 import PoweredBy from "@calcom/ee/components/PoweredBy";
 import { updateEmbedBookerState } from "@calcom/embed-core/src/embed-iframe";
 import TurnstileCaptcha from "@calcom/features/auth/Turnstile";
+import { useBookerStoreContext } from "@calcom/features/bookings/Booker/BookerStoreProvider";
 import useSkipConfirmStep from "@calcom/features/bookings/Booker/components/hooks/useSkipConfirmStep";
 import { getQueryParam } from "@calcom/features/bookings/Booker/utils/query-param";
 import { useNonEmptyScheduleDays } from "@calcom/features/schedules/lib/use-schedule/useNonEmptyScheduleDays";
@@ -39,7 +40,6 @@ import { NotFound } from "./components/Unavailable";
 import { useIsQuickAvailabilityCheckFeatureEnabled } from "./components/hooks/useIsQuickAvailabilityCheckFeatureEnabled";
 import { fadeInLeft, getBookerSizeClassNames, useBookerResizeAnimation } from "./config";
 import framerFeatures from "./framer-features";
-import { useBookerStore } from "./store";
 import type { BookerProps, WrappedBookerProps } from "./types";
 import { isBookingDryRun } from "./utils/isBookingDryRun";
 import { isTimeSlotAvailable } from "./utils/isTimeslotAvailable";
@@ -85,9 +85,14 @@ const BookerComponent = ({
 }: BookerProps & WrappedBookerProps) => {
   const searchParams = useCompatSearchParams();
   const isPlatformBookerEmbed = useIsPlatformBookerEmbed();
-  const [bookerState, setBookerState] = useBookerStore((state) => [state.state, state.setState], shallow);
+  const [bookerState, setBookerState] = useBookerStoreContext(
+    (state) => [state.state, state.setState],
+    shallow
+  );
+
+  const selectedDate = useBookerStoreContext((state) => state.selectedDate);
+  const setSelectedDate = useBookerStoreContext((state) => state.setSelectedDate);
 
-  const selectedDate = useBookerStore((state) => state.selectedDate);
   const {
     shouldShowFormInDialog,
     hasDarkBackground,
@@ -100,12 +105,15 @@ const BookerComponent = ({
     bookerLayouts,
   } = bookerLayout;
 
-  const [seatedEventData, setSeatedEventData] = useBookerStore(
+  const [seatedEventData, setSeatedEventData] = useBookerStoreContext(
     (state) => [state.seatedEventData, state.setSeatedEventData],
     shallow
   );
   const { selectedTimeslot, setSelectedTimeslot, allSelectedTimeslots } = slots;
-  const [dayCount, setDayCount] = useBookerStore((state) => [state.dayCount, state.setDayCount], shallow);
+  const [dayCount, setDayCount] = useBookerStoreContext(
+    (state) => [state.dayCount, state.setDayCount],
+    shallow
+  );
 
   const nonEmptyScheduleDays = useNonEmptyScheduleDays(schedule?.data?.slots).filter(
     (slot) => dayjs(selectedDate).diff(slot, "day") <= 0
@@ -184,6 +192,10 @@ const BookerComponent = ({
     (bookerState === "booking" || (bookerState === "selecting_time" && skipConfirmStep))
   );
 
+  const onAvailableTimeSlotSelect = (time: string) => {
+    setSelectedTimeslot(time);
+  };
+
   updateEmbedBookerState({ bookerState, slotsQuery: schedule });
 
   useEffect(() => {
@@ -220,6 +232,7 @@ const BookerComponent = ({
     return bookerState === "booking" ? (
       <BookEventForm
         key={key}
+        timeslot={selectedTimeslot}
         shouldRenderCaptcha={shouldRenderCaptcha}
         onCancel={() => {
           setSelectedTimeslot(null);
@@ -312,9 +325,7 @@ const BookerComponent = ({
   return (
     <>
       {event.data && !isPlatform ? <BookingPageTagManager eventType={event.data} /> : <></>}
-
       {(isBookingDryRunProp || isBookingDryRun(searchParams)) && <DryRunMessage isEmbed={isEmbed} />}
-
       <div
         className={classNames(
           // In a popup embed, if someone clicks outside the main(having main class or main tag), it closes the embed
@@ -394,6 +405,7 @@ const BookerComponent = ({
                   />
                 )}
                 <EventMeta
+                  selectedTimeslot={selectedTimeslot}
                   classNames={{
                     eventMetaContainer: customClassNames?.eventMetaCustomClassNames?.eventMetaContainer,
                     eventMetaTitle: customClassNames?.eventMetaCustomClassNames?.eventMetaTitle,
@@ -480,6 +492,7 @@ const BookerComponent = ({
               ref={timeslotsRef}
               {...fadeInLeft}>
               <AvailableTimeSlots
+                onAvailableTimeSlotSelect={onAvailableTimeSlotSelect}
                 customClassNames={customClassNames?.availableTimeSlotsCustomClassNames}
                 extraDays={extraDays}
                 limitHeight={layout === BookerLayouts.MONTH_VIEW}
@@ -552,7 +565,6 @@ const BookerComponent = ({
           </m.span>
         )}
       </div>
-
       <>
         {verifyCode && formEmail ? (
           <VerifyCodeDialog
@@ -571,7 +583,6 @@ const BookerComponent = ({
           <></>
         )}
       </>
-
       <BookFormAsModal
         onCancel={() => setSelectedTimeslot(null)}
         visible={bookerState === "booking" && shouldShowFormInDialog}>

packages/features/bookings/Booker/BookerStoreProvider.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { createContext, useContext, useRef, type ReactNode, useEffect } from "react";
+import { useStore } from "zustand";
+import type { StoreApi } from "zustand";
+
+import { createBookerStore, type BookerStore, type StoreInitializeType } from "./store";
+
+export const BookerStoreContext = createContext<StoreApi<BookerStore> | null>(null);
+
+export interface BookerStoreProviderProps {
+  children: ReactNode;
+}
+
+export const BookerStoreProvider = ({ children }: BookerStoreProviderProps) => {
+  const storeRef = useRef<StoreApi<BookerStore>>();
+  if (!storeRef.current) {
+    storeRef.current = createBookerStore();
+  }
+
+  return <BookerStoreContext.Provider value={storeRef.current}>{children}</BookerStoreContext.Provider>;
+};
+
+export const useBookerStoreContext = <T,>(
+  selector: (store: BookerStore) => T,
+  equalityFn?: (a: T, b: T) => boolean
+): T => {
+  const bookerStoreContext = useContext(BookerStoreContext);
+
+  if (!bookerStoreContext) {
+    throw new Error("useBookerStoreContext must be used within BookerStoreProvider");
+  }
+
+  return useStore(bookerStoreContext, selector, equalityFn);
+};
+
+export const useInitializeBookerStoreContext = ({
+  username,
+  eventSlug,
+  month,
+  eventId,
+  rescheduleUid = null,
+  rescheduledBy = null,
+  bookingData = null,
+  verifiedEmail = null,
+  layout,
+  isTeamEvent,
+  durationConfig,
+  org,
+  isInstantMeeting,
+  timezone = null,
+  teamMemberEmail,
+  crmOwnerRecordType,
+  crmAppSlug,
+  crmRecordId,
+  isPlatform = false,
+  allowUpdatingUrlParams = true,
+}: StoreInitializeType) => {
+  const bookerStoreContext = useContext(BookerStoreContext);
+
+  if (!bookerStoreContext) {
+    throw new Error("useInitializeBookerStoreContext must be used within BookerStoreProvider");
+  }
+
+  const initializeStore = useStore(bookerStoreContext, (state) => state.initialize);
+
+  useEffect(() => {
+    initializeStore({
+      username,
+      eventSlug,
+      month,
+      eventId,
+      rescheduleUid,
+      rescheduledBy,
+      bookingData,
+      layout,
+      isTeamEvent,
+      org,
+      verifiedEmail,
+      durationConfig,
+      isInstantMeeting,
+      timezone,
+      teamMemberEmail,
+      crmOwnerRecordType,
+      crmAppSlug,
+      crmRecordId,
+      isPlatform,
+      allowUpdatingUrlParams,
+    });
+  }, [
+    initializeStore,
+    org,
+    username,
+    eventSlug,
+    month,
+    eventId,
+    rescheduleUid,
+    rescheduledBy,
+    bookingData,
+    layout,
+    isTeamEvent,
+    verifiedEmail,
+    durationConfig,
+    isInstantMeeting,
+    timezone,
+    teamMemberEmail,
+    crmOwnerRecordType,
+    crmAppSlug,
+    crmRecordId,
+    isPlatform,
+    allowUpdatingUrlParams,
+  ]);
+};

packages/features/bookings/Booker/__tests__/Booker.test.tsx

@@ -10,18 +10,17 @@ import "@calcom/features/bookings/Booker/components/__mocks__/Section";
 import { constantsScenarios } from "@calcom/lib/__mocks__/constants";
 import "@calcom/lib/__mocks__/logger";
 
-import { render, screen } from "@testing-library/react";
+import React from "react";
 import { vi } from "vitest";
 
 import "@calcom/dayjs/__mocks__";
 import "@calcom/features/auth/Turnstile";
 
 import { Booker } from "../Booker";
-import { useBookerStore } from "../store";
-import type { BookerState } from "../types";
+import { render, screen } from "./test-utils";
 
 vi.mock("framer-motion", async (importOriginal) => {
-  const actual = await importOriginal();
+  const actual = (await importOriginal()) as any;
   return {
     ...actual,
   };
@@ -87,27 +86,6 @@ vi.mock("@calcom/atoms/hooks/useIsPlatform", () => ({
   useIsPlatform: () => false,
 }));
 
-// Update mockStoreState to include all required state
-const mockStoreState = {
-  state: "booking" as BookerState,
-  setState: vi.fn(),
-  selectedDate: "2024-01-01",
-  seatedEventData: {},
-  setSeatedEventData: vi.fn(),
-  tentativeSelectedTimeslots: [],
-  setTentativeSelectedTimeslots: vi.fn(),
-  dayCount: 7,
-  setDayCount: vi.fn(),
-  setSelectedTimeslot: vi.fn(),
-  selectedTimeslot: null,
-  formStep: 0,
-  setFormStep: vi.fn(),
-  bookerState: "booking",
-  setBookerState: vi.fn(),
-  layout: "default",
-  setLayout: vi.fn(),
-};
-
 // Update defaultProps to include missing required props
 const defaultProps = {
   username: "testuser",
@@ -188,32 +166,21 @@ const defaultProps = {
 describe("Booker", () => {
   beforeEach(() => {
     constantsScenarios.set({
-      PUBLIC_QUICK_AVAILABILITY_ROLLOUT: 100,
+      PUBLIC_QUICK_AVAILABILITY_ROLLOUT: "100",
       POWERED_BY_URL: "https://go.cal.com/booking",
       APP_NAME: "Cal.com",
     });
     vi.clearAllMocks();
   });
 
   it("should render null when in loading state", () => {
-    useBookerStore.setState({
-      ...mockStoreState,
-      state: "loading",
+    const { container } = render(<Booker {...defaultProps} />, {
+      mockStore: { state: "loading" },
     });
-
-    const { container } = render(<Booker {...defaultProps} />);
     expect(container).toBeEmptyDOMElement();
   });
 
   it("should render DryRunMessage when in dry run mode", () => {
-    useBookerStore.setState({
-      ...mockStoreState,
-      state: "selecting_time",
-      selectedDate: "2024-01-01",
-      selectedTimeslot: "2024-01-01T10:00:00Z",
-      tentativeSelectedTimeslots: ["2024-01-01T10:00:00Z"],
-    });
-
     const propsWithDryRun = {
       ...defaultProps,
       isBookingDryRun: true,
@@ -226,7 +193,14 @@ describe("Booker", () => {
       },
     };
 
-    render(<Booker {...propsWithDryRun} />);
+    render(<Booker {...propsWithDryRun} />, {
+      mockStore: {
+        state: "selecting_time",
+        selectedDate: "2024-01-01",
+        selectedTimeslot: "2024-01-01T10:00:00Z",
+        tentativeSelectedTimeslots: ["2024-01-01T10:00:00Z"],
+      },
+    });
     expect(screen.getByTestId("dry-run-message")).toBeInTheDocument();
   });
 
@@ -242,12 +216,10 @@ describe("Booker", () => {
         invalidate: mockInvalidate,
       },
     };
-    useBookerStore.setState({
-      ...mockStoreState,
-      state: "booking",
-    });
 
-    render(<Booker {...propsWithInvalidate} />);
+    render(<Booker {...propsWithInvalidate} />, {
+      mockStore: { state: "booking" },
+    });
     screen.logTestingPlaygroundURL();
     // Trigger form cancel
     const cancelButton = screen.getByRole("button", { name: /cancel/i });
@@ -267,12 +239,9 @@ describe("Booker", () => {
         },
       };
 
-      useBookerStore.setState({
-        ...mockStoreState,
-        state: "booking",
+      render(<Booker {...propsWithQuickChecks} />, {
+        mockStore: { state: "booking" },
       });
-
-      render(<Booker {...propsWithQuickChecks} />);
       const bookEventForm = screen.getByTestId("book-event-form");
       await expect(bookEventForm).toHaveAttribute("data-unavailable", "true");
     });