-
Notifications
You must be signed in to change notification settings - Fork 10.2k
feat: add callback for handleFormSubmit in EventType and AvailabilitySettings atoms #22911
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
…ettingsPlatformWrapper
…vailabilitySettings atoms
WalkthroughThe changes introduce optional success and error callback handling to form submission APIs across availability and event type platform components, their wrappers, and related documentation. The Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
⏰ 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)
✨ 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 comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Hey there and thank you for opening this pull request! 👋🏼 We require pull request titles to follow the Conventional Commits specification and it looks like your proposed title needs to be adjusted. Details:
|
Graphite Automations"Add consumer team as reviewer" took an action on this PR • (08/06/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/06/25)1 label was added to this PR based on Keith Williams's automation. |
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.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/platform/examples/base/src/pages/availability.tsx (1)
42-47
: Consider using a more robust status check.The UI feedback is well-implemented, but the error detection using
submissionStatus.includes("failed")
could be brittle. Consider using a separate boolean state or an enum for more reliable status tracking.- const [submissionStatus, setSubmissionStatus] = useState<string | null>(null); + const [submissionStatus, setSubmissionStatus] = useState<{ message: string; isError: boolean } | null>(null);Then update the conditional styling:
- className={`p-4 rounded-md ${submissionStatus.includes("failed") ? "bg-red-100 text-red-700" : "bg-green-100 text-green-700"}`} + className={`p-4 rounded-md ${submissionStatus.isError ? "bg-red-100 text-red-700" : "bg-green-100 text-green-700"}`}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
docs/platform/atoms/availability-settings.mdx
(2 hunks)docs/platform/atoms/event-type.mdx
(2 hunks)packages/features/eventtypes/lib/types.ts
(1 hunks)packages/platform/atoms/availability/AvailabilitySettings.tsx
(1 hunks)packages/platform/atoms/availability/types.ts
(1 hunks)packages/platform/atoms/availability/wrappers/AvailabilitySettingsPlatformWrapper.tsx
(6 hunks)packages/platform/atoms/event-types/wrappers/EventTypePlatformWrapper.tsx
(3 hunks)packages/platform/examples/base/src/pages/availability.tsx
(4 hunks)packages/platform/examples/base/src/pages/event-types.tsx
(1 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.ts
📄 CodeRabbit Inference Engine (.cursor/rules/review.mdc)
**/*.ts
: For Prisma queries, only select data you need; never useinclude
, always useselect
Ensure thecredential.key
field is never returned from tRPC endpoints or APIs
Files:
packages/features/eventtypes/lib/types.ts
packages/platform/atoms/availability/types.ts
**/*.{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/eventtypes/lib/types.ts
packages/platform/examples/base/src/pages/event-types.tsx
packages/platform/examples/base/src/pages/availability.tsx
packages/platform/atoms/availability/wrappers/AvailabilitySettingsPlatformWrapper.tsx
packages/platform/atoms/availability/types.ts
packages/platform/atoms/availability/AvailabilitySettings.tsx
packages/platform/atoms/event-types/wrappers/EventTypePlatformWrapper.tsx
**/*.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/platform/examples/base/src/pages/event-types.tsx
packages/platform/examples/base/src/pages/availability.tsx
packages/platform/atoms/availability/wrappers/AvailabilitySettingsPlatformWrapper.tsx
packages/platform/atoms/availability/AvailabilitySettings.tsx
packages/platform/atoms/event-types/wrappers/EventTypePlatformWrapper.tsx
🧠 Learnings (3)
📚 Learning: in the failedbookingsbyfield component (packages/features/insights/components/failedbookingsbyfield....
Learnt from: eunjae-lee
PR: calcom/cal.com#22106
File: packages/features/insights/components/FailedBookingsByField.tsx:65-71
Timestamp: 2025-07-15T12:59:34.389Z
Learning: In the FailedBookingsByField component (packages/features/insights/components/FailedBookingsByField.tsx), although routingFormId is typed as optional in useInsightsParameters, the system automatically enforces a routing form filter, so routingFormId is always present in practice. This means the data always contains only one entry, making the single-entry destructuring approach safe.
Applied to files:
packages/platform/examples/base/src/pages/event-types.tsx
packages/platform/examples/base/src/pages/availability.tsx
📚 Learning: in signup-view.tsx, when checking if redirecturl contains certain strings, using explicit && checks ...
Learnt from: Anshumancanrock
PR: calcom/cal.com#22570
File: apps/web/modules/signup-view.tsx:253-253
Timestamp: 2025-07-21T21:33:23.371Z
Learning: In signup-view.tsx, when checking if redirectUrl contains certain strings, using explicit && checks (redirectUrl && redirectUrl.includes()) is preferred over optional chaining (redirectUrl?.includes()) to ensure the result is always a boolean rather than potentially undefined. This approach provides cleaner boolean contracts for downstream conditional logic.
Applied to files:
packages/platform/examples/base/src/pages/availability.tsx
📚 Learning: the office365calendar webhook handler in packages/app-store/office365calendar/api/webhook.ts is spec...
Learnt from: vijayraghav-io
PR: calcom/cal.com#21072
File: packages/app-store/office365calendar/api/webhook.ts:120-123
Timestamp: 2025-07-18T17:57:16.395Z
Learning: The office365calendar webhook handler in packages/app-store/office365calendar/api/webhook.ts is specifically designed for Office365 calendar integration, not as a generic webhook handler. Therefore, it's safe to assume that fetchAvailabilityAndSetCache method will be implemented in the Office365CalendarService, making explicit validation checks unnecessary.
Applied to files:
packages/platform/atoms/availability/wrappers/AvailabilitySettingsPlatformWrapper.tsx
🧬 Code Graph Analysis (1)
packages/platform/atoms/availability/types.ts (1)
packages/platform/atoms/index.ts (1)
AvailabilitySettingsFormRef
(33-33)
⏰ 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 (16)
packages/features/eventtypes/lib/types.ts (1)
239-239
: LGTM! Well-designed callback interface enhancement.The optional callbacks parameter provides a clean way to handle asynchronous form submission outcomes while maintaining backward compatibility. The error typing is appropriate and follows TypeScript best practices.
packages/platform/examples/base/src/pages/event-types.tsx (1)
34-43
: Good example implementation of the new callback feature.The callback handlers demonstrate proper usage of the enhanced
handleFormSubmit
method. Console logging is appropriate for an example file, and the error handling captures the full error object for debugging purposes.packages/platform/atoms/availability/wrappers/AvailabilitySettingsPlatformWrapper.tsx (2)
87-87
: Clean callback storage pattern.Using a ref to store the callback functions is an appropriate approach that allows the wrapper to maintain callback state without triggering re-renders.
97-97
: Proper callback invocation order.The callbacks are correctly invoked after existing success/error handlers and toast notifications, preserving the original behavior while adding the new callback functionality. The optional chaining ensures safe execution.
Also applies to: 106-106
packages/platform/atoms/availability/types.ts (2)
38-41
: Well-structured callback interface.The
AvailabilitySettingsFormCallbacks
interface is properly designed with appropriate optional callback functions and correct error typing.
45-45
: Backward-compatible method signature update.The optional callbacks parameter maintains backward compatibility while enabling the new callback functionality. The typing is consistent with the interface definition.
packages/platform/examples/base/src/pages/availability.tsx (1)
24-33
: Excellent example implementation with proper state management.The callback implementation demonstrates how to integrate UI feedback with the form submission process. The success and error handlers appropriately update state and provide console logging.
docs/platform/atoms/event-type.mdx (2)
221-231
: LGTM: Clear documentation of callback usage.The example demonstrates proper usage of the new
handleFormSubmit
callback functionality with clear success and error handling patterns.
256-269
: LGTM: Well-structured callback type documentation.The TypeScript type definition for
EventTypeFormCallbacks
is clearly documented with helpful explanations for both callback properties.docs/platform/atoms/availability-settings.mdx (2)
159-169
: LGTM: Consistent callback implementation documentation.The example properly demonstrates the new
handleFormSubmit
callback functionality, maintaining consistency with the event-type documentation pattern.
196-209
: LGTM: Clear type definition and callback documentation.The
AvailabilitySettingsFormCallbacks
type is well-documented with appropriate descriptions for both callback functions.packages/platform/atoms/availability/AvailabilitySettings.tsx (1)
319-338
: LGTM: Solid callback implementation with proper error handling.The implementation correctly:
- Uses
useRef
to store callbacks without triggering re-renders- Provides proper try-catch error handling in the fallback submission path
- Maintains backward compatibility with the existing save button approach
- Includes correct dependencies in the
useCallback
hookpackages/platform/atoms/event-types/wrappers/EventTypePlatformWrapper.tsx (4)
142-142
: LGTM: Proper callback invocation on success.The success callback is correctly invoked after the mutation succeeds and form is reset.
150-155
: LGTM: Good error handling with callback integration.The error handling properly processes the error message for localization and creates a new Error object for the callback, maintaining consistency with the expected callback interface.
167-167
: LGTM: Consistent callback usage in dry run mode.The dry run branch appropriately calls the success callback after showing the toast message.
176-195
: LGTM: Well-implemented callback system with proper error handling.The
handleFormSubmit
implementation correctly:
- Stores callbacks in a ref to avoid re-renders
- Falls back to button click when available
- Provides try-catch error handling in the direct submission path
- Uses appropriate useCallback dependencies
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.
Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/features/eventtypes/lib/types.ts (1)
237-240
: Consider extracting callback type for consistency.The inline callback type definition is functionally correct but creates inconsistency with
AvailabilitySettingsFormCallbacks
interface. Consider extracting a shared callback interface to maintain consistency and facilitate future changes.+export interface FormSubmissionCallbacks { + onSuccess?: () => void; + onError?: (error: Error) => void; +} + export interface EventTypePlatformWrapperRef { validateForm: () => Promise<FormValidationResult>; - handleFormSubmit: (callbacks?: { onSuccess?: () => void; onError?: (error: Error) => void }) => void; + handleFormSubmit: (callbacks?: FormSubmissionCallbacks) => void; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
docs/platform/atoms/availability-settings.mdx
(2 hunks)docs/platform/atoms/event-type.mdx
(2 hunks)packages/features/eventtypes/lib/types.ts
(1 hunks)packages/platform/atoms/availability/AvailabilitySettings.tsx
(1 hunks)packages/platform/atoms/availability/types.ts
(1 hunks)packages/platform/atoms/availability/wrappers/AvailabilitySettingsPlatformWrapper.tsx
(6 hunks)packages/platform/atoms/event-types/wrappers/EventTypePlatformWrapper.tsx
(3 hunks)packages/platform/examples/base/src/pages/availability.tsx
(4 hunks)packages/platform/examples/base/src/pages/event-types.tsx
(1 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.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/platform/examples/base/src/pages/event-types.tsx
packages/platform/atoms/availability/wrappers/AvailabilitySettingsPlatformWrapper.tsx
packages/platform/examples/base/src/pages/availability.tsx
packages/platform/atoms/availability/AvailabilitySettings.tsx
packages/platform/atoms/event-types/wrappers/EventTypePlatformWrapper.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/platform/examples/base/src/pages/event-types.tsx
packages/platform/atoms/availability/wrappers/AvailabilitySettingsPlatformWrapper.tsx
packages/platform/examples/base/src/pages/availability.tsx
packages/platform/atoms/availability/types.ts
packages/platform/atoms/availability/AvailabilitySettings.tsx
packages/features/eventtypes/lib/types.ts
packages/platform/atoms/event-types/wrappers/EventTypePlatformWrapper.tsx
**/*.ts
📄 CodeRabbit Inference Engine (.cursor/rules/review.mdc)
**/*.ts
: For Prisma queries, only select data you need; never useinclude
, always useselect
Ensure thecredential.key
field is never returned from tRPC endpoints or APIs
Files:
packages/platform/atoms/availability/types.ts
packages/features/eventtypes/lib/types.ts
🧠 Learnings (3)
📚 Learning: in signup-view.tsx, when checking if redirecturl contains certain strings, using explicit && checks ...
Learnt from: Anshumancanrock
PR: calcom/cal.com#22570
File: apps/web/modules/signup-view.tsx:253-253
Timestamp: 2025-07-21T21:33:23.371Z
Learning: In signup-view.tsx, when checking if redirectUrl contains certain strings, using explicit && checks (redirectUrl && redirectUrl.includes()) is preferred over optional chaining (redirectUrl?.includes()) to ensure the result is always a boolean rather than potentially undefined. This approach provides cleaner boolean contracts for downstream conditional logic.
Applied to files:
packages/platform/examples/base/src/pages/event-types.tsx
packages/platform/examples/base/src/pages/availability.tsx
📚 Learning: in the failedbookingsbyfield component (packages/features/insights/components/failedbookingsbyfield....
Learnt from: eunjae-lee
PR: calcom/cal.com#22106
File: packages/features/insights/components/FailedBookingsByField.tsx:65-71
Timestamp: 2025-07-15T12:59:34.389Z
Learning: In the FailedBookingsByField component (packages/features/insights/components/FailedBookingsByField.tsx), although routingFormId is typed as optional in useInsightsParameters, the system automatically enforces a routing form filter, so routingFormId is always present in practice. This means the data always contains only one entry, making the single-entry destructuring approach safe.
Applied to files:
packages/platform/examples/base/src/pages/event-types.tsx
packages/platform/examples/base/src/pages/availability.tsx
📚 Learning: the office365calendar webhook handler in packages/app-store/office365calendar/api/webhook.ts is spec...
Learnt from: vijayraghav-io
PR: calcom/cal.com#21072
File: packages/app-store/office365calendar/api/webhook.ts:120-123
Timestamp: 2025-07-18T17:57:16.395Z
Learning: The office365calendar webhook handler in packages/app-store/office365calendar/api/webhook.ts is specifically designed for Office365 calendar integration, not as a generic webhook handler. Therefore, it's safe to assume that fetchAvailabilityAndSetCache method will be implemented in the Office365CalendarService, making explicit validation checks unnecessary.
Applied to files:
packages/platform/atoms/availability/wrappers/AvailabilitySettingsPlatformWrapper.tsx
🧬 Code Graph Analysis (2)
packages/platform/atoms/availability/wrappers/AvailabilitySettingsPlatformWrapper.tsx (2)
packages/platform/atoms/availability/types.ts (1)
AvailabilitySettingsFormRef
(43-46)packages/platform/atoms/index.ts (1)
AvailabilitySettingsFormRef
(33-33)
packages/platform/atoms/availability/types.ts (1)
packages/platform/atoms/index.ts (1)
AvailabilitySettingsFormRef
(33-33)
⏰ 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). (2)
- GitHub Check: Install dependencies / Yarn install & cache
- GitHub Check: Codacy Static Code Analysis
🔇 Additional comments (19)
packages/platform/atoms/availability/types.ts (2)
38-41
: LGTM! Clean callback interface definition.The interface properly defines optional success and error callbacks with appropriate signatures.
43-46
: LGTM! Consistent interface update.The method signature properly integrates the new callbacks parameter while maintaining backward compatibility through optional parameters.
packages/platform/examples/base/src/pages/event-types.tsx (1)
33-44
: LGTM! Good example of callback usage.The implementation properly demonstrates how to use the new callback mechanism with appropriate success and error handling including logging and placeholder comments for additional logic.
packages/platform/atoms/availability/wrappers/AvailabilitySettingsPlatformWrapper.tsx (4)
2-2
: LGTM! Necessary imports added.The
useRef
import andAvailabilitySettingsFormRef
type import are correctly added to support the new callback functionality.Also applies to: 17-17
87-87
: LGTM! Proper callback ref implementation.The ref is correctly typed and initialized to store the callback functions that will be invoked during mutation success/error handling.
97-97
: LGTM! Safe callback invocation in success handler.The success callback is properly invoked after the existing success logic using safe optional chaining.
106-106
: LGTM! Safe callback invocation in error handler.The error callback is properly invoked after the existing error logic, correctly passing the error parameter using safe optional chaining.
packages/platform/examples/base/src/pages/availability.tsx (3)
3-3
: LGTM! Appropriate state management for submission status.The
submissionStatus
state anduseState
import are correctly added to track form submission outcomes.Also applies to: 12-12
23-34
: LGTM! Good callback implementation with user feedback.The callbacks properly update the submission status and provide logging. Using
error.message
in the status is appropriate for user-friendly error display.
42-58
: LGTM! Clean UI implementation for status feedback.The layout changes and conditional status display provide good user feedback with appropriate styling for success/error states.
docs/platform/atoms/event-type.mdx (2)
221-231
: LGTM! Well-documented callback pattern.The updated example clearly demonstrates the new callback functionality with proper error handling and success logging.
256-269
: Excellent documentation of the new callback types.The TypeScript type definition and explanations for
onSuccess
andonError
callbacks are clear and comprehensive, providing developers with the necessary information to implement custom callback handling.packages/platform/atoms/availability/AvailabilitySettings.tsx (2)
319-319
: Good use of useRef for callback storage.Using
useRef
to store callbacks is the correct approach here, ensuring they persist across renders without causing unnecessary re-renders.
321-338
: Well-implemented callback handling in form submission.The implementation properly:
- Accepts optional callbacks and stores them in the ref
- Handles both save button click and direct form submission paths
- Includes proper error handling with try-catch for the direct submission path
- Invokes callbacks at the appropriate times
docs/platform/atoms/availability-settings.mdx (2)
159-169
: Clear example demonstrating callback usage.The updated example properly shows how to use the new callback functionality with both success and error handling patterns.
196-209
: Comprehensive callback documentation.The TypeScript type definition and detailed explanations provide developers with clear guidance on implementing custom callback handlers for form submission results.
packages/platform/atoms/event-types/wrappers/EventTypePlatformWrapper.tsx (3)
176-176
: Consistent callback storage pattern.Using
useRef
for callback storage matches the implementation in AvailabilitySettings, maintaining consistency across the codebase.
178-195
: Well-structured callback handling with proper fallback.The implementation correctly:
- Accepts and stores optional callbacks
- Handles both save button click and direct form submission paths
- Includes proper error handling in the fallback path
- Maintains consistency with the availability settings pattern
142-142
: Callback invocation properly integrated with mutation lifecycle.The callbacks are correctly invoked in both mutation success and error handlers, allowing external components to react to form submission outcomes.
Also applies to: 154-155
@@ -84,6 +84,8 @@ export const AvailabilitySettingsPlatformWrapper = forwardRef< | |||
}, | |||
}); | |||
|
|||
const callbacksRef = useRef<{ onSuccess?: () => void; onError?: (error: Error) => void }>({}); |
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
Verify callback storage mechanism.
The wrapper creates callbacksRef
and invokes callbacks during mutations, but there's no visible code that stores callbacks in the ref. Ensure that the forwarded AvailabilitySettings
component properly stores callbacks when handleFormSubmit
is called.
🏁 Script executed:
#!/bin/bash
# Description: Verify that AvailabilitySettings component implements callback storage
# Expected: Find handleFormSubmit implementation that stores callbacks in a ref
ast-grep --pattern $'handleFormSubmit = ($$$) => {
$$$
}'
# Also search for where callbacksRef or similar is assigned
rg -A 10 "callbacksRef.*=" --type tsx
Length of output: 128
🏁 Script executed:
#!/bin/bash
# Inspect the wrapper for callbacksRef usage
rg -C5 "const callbacksRef" -n packages/platform/atoms/availability
# Check for any assignments to callbacksRef.current
rg -C5 "callbacksRef.current" -n packages/platform/atoms/availability
# Search for handleFormSubmit implementation across the repo
rg -n "handleFormSubmit" -n .
Length of output: 10208
🏁 Script executed:
#!/bin/bash
# Inspect how the wrapper renders AvailabilitySettings and handles form submission
rg -C5 "<AvailabilitySettings" -n packages/platform/atoms/availability/wrappers/AvailabilitySettingsPlatformWrapper.tsx
# Check for handleFormSubmit definitions or references in the wrapper
rg -C5 "handleFormSubmit" -n packages/platform/atoms/availability/wrappers/AvailabilitySettingsPlatformWrapper.tsx
Length of output: 500
Implement callback assignment in AvailabilitySettingsPlatformWrapper
The callbacksRef
in AvailabilitySettingsPlatformWrapper.tsx
is never populated—so when updateSchedule
settles, there’s nothing stored to invoke. You need to intercept the child’s form submission, capture the callbacks into the wrapper’s ref, and then call the mutation. For example:
- Define a
handleFormSubmit
in the wrapper that does:const callbacksRef = useRef<{ onSuccess?: () => void; onError?: (error: Error) => void }>({});
- const handleFormSubmit = useCallback(
- (customCallbacks?: { onSuccess?: () => void; onError?: (error: Error) => void }) => {
-
if (customCallbacks) callbacksRef.current = customCallbacks;
-
// Trigger the same mutation flow you’d use on save
-
updateSchedule(/* pass form data here */);
- },
- [updateSchedule]
- );
- Pass this handler into `<AvailabilitySettings>` instead of only forwarding the ref:
```diff
<AvailabilitySettings
ref={ref}
disableEditableHeading={disableEditableHeading}
+ handleFormSubmit={handleFormSubmit}
handleDelete={...}
/* other props */
/>
This ensures that callbacksRef.current
is set before updateSchedule
runs, so your onSuccess
/ onError
callbacks actually fire.
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In
packages/platform/atoms/availability/wrappers/AvailabilitySettingsPlatformWrapper.tsx
at line 87, the callbacksRef is declared but never assigned, so the onSuccess
and onError callbacks are never called after updateSchedule. To fix this, create
a handleFormSubmit function in the wrapper that accepts the callbacks from the
child form submission and assigns them to callbacksRef.current, then triggers
the updateSchedule mutation. Pass this handleFormSubmit function as a prop to
the <AvailabilitySettings> component instead of just forwarding the ref,
ensuring callbacksRef is populated before updateSchedule runs.
The latest updates on your projects. Learn more about Vercel for Git ↗︎ |
availabilityRef.current?.handleFormSubmit({ | ||
onSuccess: () => { | ||
console.log("Form submitted successfully via callback"); | ||
setSubmissionStatus("Form submitted successfully!"); |
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.
to test see this console
eventTypeRef.current?.handleFormSubmit(); | ||
eventTypeRef.current?.handleFormSubmit({ | ||
onSuccess: () => { | ||
console.log('Event type updated successfully'); |
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.
to test, see this console
…alcom/cal.com into feat/form-submission-callbacks
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.
Actionable comments posted: 0
🧹 Nitpick comments (1)
.changeset/forty-clubs-mate.md (1)
2-10
: Clarify backward-compatibility and usage caveats in the changesetThe note says the new
callbacks
object is optional, so this should be a non-breaking enhancement (minor bump is correct).
However, callers that pass positional arguments could be confused unless it’s explicit that the new parameter is added as the last argument and fully optional. Adding one extra sentence such asThis is fully backward-compatible; existing calls without a callbacks argument keep working unchanged.
would avoid ambiguity for library consumers scanning the changelog.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
.changeset/forty-clubs-mate.md
(1 hunks)
⏰ 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: Install dependencies / Yarn install & cache
code will looks good, need to test it in the examples app now |
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.
@SomayChauhan displayed a preview and it was looking good there!
E2E results are ready! |
…Settings atoms (calcom#22911) * feat: Implement callback pattern in handleFormSubmit of EventTypePlatformWrapper * feat: Implement callback pattern in handleFormSubmit of AvailabilitySettingsPlatformWrapper * docs: add handleFormSubmit callback documentation for EventType and AvailabilitySettings atoms * Update availability.tsx * chore:added changelog * update docs --------- Co-authored-by: Rajiv Sahal <sahalrajiv-extc@atharvacoe.ac.in>
What does this PR do?
This PR introduces new callback functions to the handleFormSubmit method in the EventTypeSettings and AvailabilitySettings atoms. The handleFormSubmit method now accepts an optional callbacks object with the following properties:
onSuccess: Called when the form submission is successful, allowing additional logic to be executed after the update.
onError: Called when an error occurs during form submission, providing details about the error to handle specific cases or display custom messages.
Mandatory Tasks (DO NOT REMOVE)