fix: multiple booking duration isn't working#23140
Conversation
|
@anikdhabal is attempting to deploy a commit to the cal Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe component Duration.tsx was updated to use a context-based Booker store hook. The import was changed from useBookerStore (from "@calcom/features/bookings/Booker/store") to useBookerStoreContext (from "@calcom/features/bookings/Booker/BookerStoreProvider"). Corresponding hook calls were updated to use useBookerStoreContext for selecting selectedDuration, setSelectedDuration, and state. This reflects a public API shift: the old useBookerStore export is removed in favor of the new useBookerStoreContext provided by the BookerStoreProvider module. Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. ✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
dosubot
bot
added
bookings
| import { useIsPlatform } from "@calcom/atoms/hooks/useIsPlatform"; | ||
| import { useIsEmbed } from "@calcom/embed-core/embed-iframe"; | ||
| import { useShouldShowArrows } from "@calcom/features/apps/components/AllApps"; | ||
| import { useBookerStore } from "@calcom/features/bookings/Booker/store"; |
There was a problem hiding this comment.
Duration.tsx updates the global store while useSlots.ts reads from context store :-
This issue is regressed from this pr:- #22925
There was a problem hiding this comment.
might've missed this one, thank you for the fix @anikdhabal! 🐐
Graphite Automations"Add consumer team as reviewer" took an action on this PR • (08/17/25)1 reviewer was added to this PR based on Keith Williams's automation. "Add ready-for-e2e label" took an action on this PR • (08/17/25)1 label was added to this PR based on Keith Williams's automation. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (6)
packages/features/bookings/components/event-meta/Duration.tsx (6)
48-52: Avoid unnecessary re-renders: add shallow equalitySelecting an array from zustand without an equality function recreates the array each render and can cause extra updates. Use shallow comparator.
Apply this diff in the selected lines:
- const [selectedDuration, setSelectedDuration, state] = useBookerStoreContext((state) => [ - state.selectedDuration, - state.setSelectedDuration, - state.state, - ]); + const [selectedDuration, setSelectedDuration, state] = useBookerStoreContext( + (state) => [state.selectedDuration, state.setSelectedDuration, state.state], + shallow + );And add this import at the top of the file:
import { shallow } from "zustand/shallow";
48-52: Clarify naming: avoid shadowing with “state”state is both the selector param and a string status from the store (state.state). Rename the local variable for readability.
- const [selectedDuration, setSelectedDuration, state] = useBookerStoreContext( - (state) => [state.selectedDuration, state.setSelectedDuration, state.state], - shallow - ); + const [selectedDuration, setSelectedDuration, bookerFlowState] = useBookerStoreContext( + (state) => [state.selectedDuration, state.setSelectedDuration, state.state], + shallow + ); @@ - .filter((dur) => state !== "booking" || dur === selectedDuration) + .filter((dur) => bookerFlowState !== "booking" || dur === selectedDuration)Also applies to: 112-113
114-118: Use a stable keyUsing the array index as a key can cause unnecessary remounts if the durations list changes. The duration itself is stable and unique.
- .map((duration, index) => ( + .map((duration) => ( @@ - key={index} + key={duration}
100-106: A11y + behavior: add type='button' and accessible labels to navigation buttonsButtons default to type="submit" and can accidentally submit a wrapping form. Also, add aria-labels and hide decorative icons from AT.
- <button onClick={handleLeft} className="absolute bottom-0 left-0 flex"> + <button + type="button" + onClick={handleLeft} + className="absolute bottom-0 left-0 flex" + aria-label={t("scroll_left")} + > @@ - <Icon name="chevron-left" className="text-subtle h-4 w-4" /> + <Icon name="chevron-left" className="text-subtle h-4 w-4" aria-hidden="true" /> @@ - <button onClick={handleRight} className="absolute bottom-0 right-0 flex"> + <button + type="button" + onClick={handleRight} + className="absolute bottom-0 right-0 flex" + aria-label={t("scroll_right")} + > @@ - <Icon name="chevron-right" className="text-subtle h-4 w-4" /> + <Icon name="chevron-right" className="text-subtle h-4 w-4" aria-hidden="true" />Note: ensure the i18n keys scroll_left and scroll_right exist (or replace with your project’s standard keys).
Also applies to: 128-135
107-111: Minor: avoid arrow wrapper for onScrollPassing the handler directly avoids creating a new function on each render.
- onScroll={(e) => calculateScroll(e)} + onScroll={calculateScroll}
115-116: Test id attribute naming consistencyProject conventions typically use data-testid (lowercase id). If that’s the convention here, consider aligning to avoid brittle selectors.
- data-testId={`multiple-choice-${duration}mins`} + data-testid={`multiple-choice-${duration}mins`}If other tests/components expect data-testId, keep as-is for consistency.
📜 Review details
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 sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
packages/features/bookings/components/event-meta/Duration.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.tsx
📄 CodeRabbit Inference Engine (.cursor/rules/review.mdc)
Always use
t()for text localization in frontend code; direct text embedding should trigger a warning
Files:
packages/features/bookings/components/event-meta/Duration.tsx
**/*.{ts,tsx}
📄 CodeRabbit Inference Engine (.cursor/rules/review.mdc)
Flag excessive Day.js use in performance-critical code; prefer native Date or Day.js
.utc()in hot paths like loops
Files:
packages/features/bookings/components/event-meta/Duration.tsx
🧬 Code Graph Analysis (1)
packages/features/bookings/components/event-meta/Duration.tsx (1)
packages/features/bookings/Booker/BookerStoreProvider.tsx (1)
useBookerStoreContext(24-35)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Codacy Static Code Analysis
🔇 Additional comments (2)
packages/features/bookings/components/event-meta/Duration.tsx (2)
7-7: Hook migration to useBookerStoreContext looks correctThe import aligns with the new BookerStoreProvider API and is a straightforward, safe swap.
48-52: EventDuration is always wrapped by BookerStoreProviderI checked all
<EventDuration>call sites and their parents:
components/event-meta/Duration.tsx→ used incomponents/event-meta/Details.tsxEventDetails(Details.tsx) is imported byBooker/components/EventMeta.tsxEventMetais only ever rendered inside<BookerStoreProvider>(e.g. inBookerWebWrapper.tsxandBookerPlatformWrapper.tsx)There are no paths where
EventDurationrenders outside of a BookerStoreProvider. No changes needed.
E2E results are ready! |
4 participants
What does this PR do?
Fixes:- https://www.loom.com/share/ea091b183a0f46c7bba028c25c6fe1ea?sid=092990d5-32f9-4993-a813-f741a0d9434c
Now:-
60min._.Free.First.Hidden.Example._.Cal.com.and.19.more.pages.-.Personal.-.Microsoft.Edge.2025-08-17.21-36-46.mp4