feat(ui): Automatically send invites after checkout

[dstaley]

Description

This PR updates the invite members flow to automatically send invitations on successful checkout if the checkout was triggered from an insufficient_seats API error. It will only trigger checkout once; if insufficient_seats is returned again after checkout the components will render an error instead of attempting to checkout again.

Checklist

• pnpm test runs as expected.
• pnpm build runs as expected.
• (If applicable) JSDoc comments have been added or updated for any package exports
• (If applicable) Documentation has been updated

Type of change

• 🐛 Bug fix
• 🌟 New feature
• 🔨 Breaking change
• 📖 Refactoring / dependency upgrade / documentation
• other:

Summary by CodeRabbit

• New Features

  • Organization member invitations requiring additional seat purchases now send automatically once checkout completes successfully, removing the need for manual follow-up steps.

• Bug Fixes

  • Strengthened error handling and email validation in the invitation workflow for improved reliability.

• Tests

  • Integration tests updated to verify automatic invitation delivery following successful checkout.

[changeset-bot]

🦋 Changeset detected

Latest commit: ba6a595

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@clerk/ui	Patch
@clerk/chrome-extension	Patch
@clerk/swingset	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	Jun 16, 2026 4:21pm
swingset	Ready	Preview, Comment	Jun 16, 2026 4:21pm

[coderabbitai]

📝 Walkthrough

Walkthrough

HandleSelectPlanProps gains an optional onSubscriptionComplete callback that is forwarded into the checkout handler after revalidateAll. InviteMembersForm is refactored to centralize invite logic into inviteMembers, inviteMembersAfterCheckout, and handleInviteMembersError helpers, using the new callback to automatically resume pending invitations after a successful seat-purchase checkout completes.

Changes

Invite-after-checkout flow

Layer / File(s)	Summary
HandleSelectPlanProps onSubscriptionComplete extension packages/ui/src/contexts/components/Plans.tsx	Adds optional onSubscriptionComplete?: () => void to HandleSelectPlanProps, destructures it in handleSelectPlan, and calls it after revalidateAll() inside the checkout completion handler.
InviteMembersForm invite-after-checkout refactor packages/ui/src/components/OrganizationProfile/InviteMembersForm.tsx	Introduces InviteMembersParams type and splits submission into inviteMembers, inviteMembersAfterCheckout, and handleInviteMembersError helpers. The insufficient_seats path conditionally opens checkout and resumes invites via the onSubscriptionComplete callback. removeInvalidEmails accepts an explicit email list.
Integration test and changeset integration/tests/per-seat-pricing.test.ts, .changeset/invite-checkout-complete.md	fillInviteForm removes the role-selection UI steps. Post-checkout assertion replaces UI tab checks with a 15s backend poll via getOrganizationInvitationList for a pending invitation matching INVITEE_EMAIL. Changeset records the patch.

Sequence Diagram(s)

sequenceDiagram
participant User
participant InviteMembersForm
participant handleSelectPlan
participant Checkout
participant ClerkAPI
User->>InviteMembersForm: submit invite form
InviteMembersForm->>ClerkAPI: inviteMembers(params)
ClerkAPI-->>InviteMembersForm: insufficient_seats error
InviteMembersForm->>handleSelectPlan: open checkout with onSubscriptionComplete
handleSelectPlan->>Checkout: clerk.__internal_openCheckout
User->>Checkout: complete purchase
Checkout-->>handleSelectPlan: subscription complete
handleSelectPlan->>handleSelectPlan: revalidateAll()
handleSelectPlan->>InviteMembersForm: onSubscriptionComplete()
InviteMembersForm->>ClerkAPI: inviteMembersAfterCheckout(params)
ClerkAPI-->>InviteMembersForm: invitations sent

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐇 Hop, hop, the checkout's done,
No more waiting — invites run!
Seats are bought, the queue resumes,
Emails fly through virtual rooms.
One smooth flow from start to end,
A bouncy path around each bend! 🌟

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'feat(ui): Automatically send invites after checkout' accurately summarizes the main feature being implemented across all changed files, which add functionality to automatically send organization member invitations after successful checkout completion.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[pkg-pr-new]

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@8869

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@8869

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@8869

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@8869

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@8869

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@8869

@clerk/express

npm i https://pkg.pr.new/@clerk/express@8869

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@8869

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@8869

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@8869

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@8869

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@8869

@clerk/react

npm i https://pkg.pr.new/@clerk/react@8869

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@8869

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@8869

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@8869

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@8869

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@8869

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@8869

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@8869

commit: ba6a595

[github-actions]

API Changes Report

Generated by Break Check on 2026-06-16T16:22:30.251Z

Summary

Metric	Count
Packages analyzed	19
Packages with changes	0
🔴 Breaking changes	0
🟡 Non-breaking changes	0
🟢 Additions	0

No API Changes Detected

All packages have stable APIs with no detected changes.

---

Report generated by Break Check

_{Last ran on ba6a595.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/ui/src/components/OrganizationProfile/InviteMembersForm.tsx`:
- Around line 151-158: The error handling logic in the InviteMembersForm.tsx
file has a risk of creating unhandled promise rejections when used in
fire-and-forget callback paths. In the error handler that checks for
ClerkAPIResponseError, when the error is not a ClerkAPIResponseError and not an
Error instance, the code currently rethrows the unknown value. Instead of
rethrowing err directly in the else branch after the `if (err instanceof Error)`
check, wrap the unknown value as an Error object or call handleError with it to
ensure all error paths result in surfaced UI errors rather than unhandled
promise rejections.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Repository UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: eccc2d46-d8e6-4977-8438-42cc72051a83

📥 Commits

Reviewing files that changed from the base of the PR and between 045d93f and dc68843.

📒 Files selected for processing (4)

• .changeset/invite-checkout-complete.md
• integration/tests/per-seat-pricing.test.ts
• packages/ui/src/components/OrganizationProfile/InviteMembersForm.tsx
• packages/ui/src/contexts/components/Plans.tsx

[coderabbitai]

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Avoid rethrowing unknown values from this shared error handler.

This helper is also used by the fire-and-forget checkout callback path; rethrowing non-Error values can become an unhandled promise rejection instead of a surfaced UI error.

Suggested fix

 if (!isClerkAPIResponseError(err)) {
- if (err instanceof Error) {- handleError(err, [], card.setError);- return;- }-- throw err;+ const normalizedError = err instanceof Error ? err : new Error('Unknown invite error');+ handleError(normalizedError, [], card.setError);+ return;
}

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/ui/src/components/OrganizationProfile/InviteMembersForm.tsx` around
lines 151 - 158, The error handling logic in the InviteMembersForm.tsx file has
a risk of creating unhandled promise rejections when used in fire-and-forget
callback paths. In the error handler that checks for ClerkAPIResponseError, when
the error is not a ClerkAPIResponseError and not an Error instance, the code
currently rethrows the unknown value. Instead of rethrowing err directly in the
else branch after the `if (err instanceof Error)` check, wrap the unknown value
as an Error object or call handleError with it to ensure all error paths result
in surfaced UI errors rather than unhandled promise rejections.