fix: multiple widgets for Booker atom
#22925
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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. | ||
|
|
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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, | ||
| ]); | ||
|
Comment on lines
+67
to
+112
There was a problem hiding this comment. 💡 Verification agent 🧩 Analysis chainConsider the impact of frequent re-initializations The Consider whether all these dependencies are necessary. Typically, initialization should only occur when key identifiers change (e.g., 🏁 Script executed: #!/bin/bash
# Check how the initialize method handles re-initialization in the store
ast-grep --pattern 'initialize: (data: StoreInitializeType) => {
$$$
}'Length of output: 75 I didn’t find an 🏁 Script executed: #!/bin/bash
# Search for where initializeStore is defined or imported
rg -n "initializeStore" --glob "*.ts*"Length of output: 875 Let’s inspect the 🏁 Script executed: #!/bin/bash
# Show the initialize method in Booker store
sed -n '460,550p' packages/features/bookings/Booker/store.tsLength of output: 1233 Let’s inspect the actual 🏁 Script executed: #!/bin/bash
# Locate and display the initialize action implementation
rg -n -C 5 "initialize:" packages/features/bookings/Booker/store.tsLength of output: 883 Inspecting the full 🏁 Script executed: #!/bin/bash
# Extract the body of the initialize action
sed -n '295,380p' packages/features/bookings/Booker/store.tsLength of output: 2812 Align The
To resolve this mismatch, choose one of:
Places to update:
🤖 Prompt for AI Agents |
||
| }; | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
💡 Verification agent
🧩 Analysis chain
Prop threading sanity-check
Passing
timeslot={selectedTimeslot}to BookEventForm andselectedTimeslotto EventMeta requires updated prop types/usages downstream. If not already done, ensure those components accept and use these props.Run:
Also applies to: 407-407
🏁 Script executed:
Length of output: 904
🏁 Script executed:
Length of output: 10075
🏁 Script executed:
Length of output: 2807
🏁 Script executed:
Length of output: 4048
Update EventMeta to accept
selectedTimeslotIt looks like you’ve correctly threaded the
timeslotprop intoBookEventForm(its props type already includestimeslot: string | null), but theEventMetacomponent itself doesn’t define or consume aselectedTimeslotprop. You’ll need to:• In
packages/features/bookings/Booker/components/EventMeta.tsx, addselectedTimeslot?: string | null(or required) to its props definition.• Destructure and use
selectedTimeslotinsideEventMetawherever you need to display or conditionally render based on the currently selected slot.This will keep the type system happy and ensure
EventMetaactually responds to the timeslot state you’re passing in.🤖 Prompt for AI Agents