Skip to content

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

Merged
merged 10 commits into from
Aug 7, 2025

Conversation

SomayChauhan
Copy link
Member

@SomayChauhan SomayChauhan commented Aug 6, 2025

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.

  • Fixes #XXXX (GitHub issue number)
  • Fixes CAL-XXXX (Linear issue number - should be visible at the bottom of the GitHub issue description)

Mandatory Tasks (DO NOT REMOVE)

  • I have self-reviewed the code (A decent size PR without self-review might be rejected).
  • I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. If N/A, write N/A here and check the checkbox.
  • I confirm automated tests are in place that prove my fix is effective or that my feature works.

@SomayChauhan SomayChauhan requested review from a team as code owners August 6, 2025 03:54
Copy link
Contributor

coderabbitai bot commented Aug 6, 2025

Walkthrough

The 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 handleFormSubmit method in both AvailabilitySettings and EventTypePlatformWrapper components is updated to accept an optional callbacks object with onSuccess and onError handlers. These callbacks are stored in refs and invoked appropriately after form submission or mutation success or failure. Corresponding TypeScript type/interface definitions are updated or added to reflect the new parameter. Documentation and example usage are updated to demonstrate and explain the new callback mechanism, including UI feedback for submission status in example pages. No changes to core logic or control flow beyond callback invocation were made.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

  • Complexity: Moderate. The changes are localized to form submission logic, documentation, and examples, but span multiple files and introduce new callback patterns that require careful review for consistency and correct invocation across asynchronous flows.

Note

⚡️ Unit Test Generation is now available in beta!

Learn more here, or try it out under "Finishing Touches" below.


📜 Recent review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between e109ff5 and eeb6dba.

📒 Files selected for processing (2)
  • docs/platform/atoms/availability-settings.mdx (2 hunks)
  • docs/platform/atoms/event-type.mdx (2 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
  • docs/platform/atoms/event-type.mdx
  • docs/platform/atoms/availability-settings.mdx
⏰ 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
✨ Finishing Touches
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch feat/form-submission-callbacks

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.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai generate unit tests to generate unit tests for this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@graphite-app graphite-app bot requested a review from a team August 6, 2025 03:54
Copy link
Contributor

github-actions bot commented Aug 6, 2025

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:

Unknown release type "Feat" found in pull request title "Feat: form submission callbacks". 

Available types:
 - feat: A new feature
 - fix: A bug fix
 - docs: Documentation only changes
 - style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
 - refactor: A code change that neither fixes a bug nor adds a feature
 - perf: A code change that improves performance
 - test: Adding missing tests or correcting existing tests
 - build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
 - ci: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
 - chore: Other changes that don't modify src or test files
 - revert: Reverts a previous commit

@SomayChauhan SomayChauhan changed the title Feat: form submission callbacks feat: form submission callbacks Aug 6, 2025
@keithwillcode keithwillcode added core area: core, team members only platform Anything related to our platform plan labels Aug 6, 2025
Copy link

graphite-app bot commented Aug 6, 2025

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.

@dosubot dosubot bot added the ✨ feature New feature or request label Aug 6, 2025
Copy link
Contributor

@coderabbitai coderabbitai bot left a 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

📥 Commits

Reviewing files that changed from the base of the PR and between 5d0dc3f and dc8bc30.

📒 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 use include, always use select
Ensure the credential.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 hook
packages/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

@SomayChauhan SomayChauhan changed the title feat: form submission callbacks feat: add callback for EventType and AvailabilitySettings atoms handleFormSubmit prop Aug 6, 2025
@SomayChauhan SomayChauhan changed the title feat: add callback for EventType and AvailabilitySettings atoms handleFormSubmit prop feat: add callback for handleFormSubmit in EventType and AvailabilitySettings atoms Aug 6, 2025
Copy link
Contributor

@coderabbitai coderabbitai bot left a 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

📥 Commits

Reviewing files that changed from the base of the PR and between 5d0dc3f and dc8bc30.

📒 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 use include, always use select
Ensure the credential.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 and AvailabilitySettingsFormRef 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 and useState 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 and onError 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 }>({});
Copy link
Contributor

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.

Copy link

vercel bot commented Aug 6, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Skipped Deployments
Name Status Preview Comments Updated (UTC)
cal ⬜️ Ignored (Inspect) Aug 6, 2025 2:06pm
cal-eu ⬜️ Ignored (Inspect) Aug 6, 2025 2:06pm

availabilityRef.current?.handleFormSubmit({
onSuccess: () => {
console.log("Form submitted successfully via callback");
setSubmissionStatus("Form submitted successfully!");
Copy link
Member Author

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');
Copy link
Member Author

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

Copy link
Contributor

@coderabbitai coderabbitai bot left a 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 changeset

The 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 as

This 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

📥 Commits

Reviewing files that changed from the base of the PR and between ff4e325 and e109ff5.

📒 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

@Ryukemeister
Copy link
Contributor

code will looks good, need to test it in the examples app now

Copy link
Contributor

@Ryukemeister Ryukemeister left a 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!

Copy link
Contributor

github-actions bot commented Aug 6, 2025

E2E results are ready!

@supalarry supalarry merged commit d3fbc73 into main Aug 7, 2025
59 of 61 checks passed
@supalarry supalarry deleted the feat/form-submission-callbacks branch August 7, 2025 08:26
Pallava-Joshi pushed a commit to Pallava-Joshi/cal.com that referenced this pull request Aug 8, 2025
…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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
core area: core, team members only ✨ feature New feature or request platform Anything related to our platform plan ready-for-e2e
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants