* Revert "Revert "feat: redesign team creation flow to match onboarding-v3 design (#26733)""
This re-applies the team creation redesign from PR #26733 which was
previously reverted. Cherry-picked from 2540423ba3.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* fix: check org/username slug when in org context
* fix: use expect(page).toHaveURL() instead of page.waitForURL() in team e2e test
Co-Authored-By: unknown <>
* fix: redirect URL
* fix: flag import
---------
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
* feat: redesign team creation flow to match onboarding-v3 design
Co-Authored-By: sean@cal.com <Sean@brydon.io>
* feat: skip invite options and go directly to email invite step
Co-Authored-By: sean@cal.com <Sean@brydon.io>
* feat: invalidate teams query on submit to refresh teams list
Co-Authored-By: sean@cal.com <Sean@brydon.io>
* fix: use server action to invalidate server-side teams cache
Co-Authored-By: sean@cal.com <Sean@brydon.io>
* fix: conditionally render avatar in browser view to remove extra padding
Co-Authored-By: sean@cal.com <Sean@brydon.io>
* fix browser view
* test: update team creation E2E tests to use new onboarding-v3 flow
Co-Authored-By: sean@cal.com <Sean@brydon.io>
* test: update auth-index.e2e.ts to use new team creation flow
Co-Authored-By: sean@cal.com <Sean@brydon.io>
* test: update team-management.e2e.ts to use new team creation flow
Co-Authored-By: sean@cal.com <Sean@brydon.io>
* fix: add error handling for createTeam and improve CSV parsing for quoted fields
Co-Authored-By: sean@cal.com <Sean@brydon.io>
---------
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
## What does this PR do?
This PR changes the order of creating the team -> paying -> invite users.
The old approach was create team -> invite -> pay. But we are matching the current implementation of how billing works with usage based billing
## How should this be tested?
Enable onboarding-v3 flag on your instance
Ensure you have stripe enabled + stripe:listen running
login as onboarding@example.com, onboarding
Go through the team setup flow
Pay
Invite
Ensure uers were added to team
Create a new account
disable billing
Test again
## Checklist
<!-- Remove bullet points below that don't apply to you -->
- I haven't read the [contributing guide](https://github.com/calcom/cal.com/blob/main/CONTRIBUTING.md)
- My code doesn't follow the style guidelines of this project
- I haven't commented my code, particularly in hard-to-understand areas
- I haven't checked if my changes generate no new warnings
<!-- This is an auto-generated description by cubic. -->
## Summary by cubic
Revamps onboarding with subtle route transitions, new org/teams illustrations, and clearer invite flows with real-time previews. Adds “Skip for now” on invites and guardrails to avoid incomplete team creation.
- **New Features**
- Added email invite pages for organizations and teams with shared EmailInviteForm and RoleSelector.
- Built a live invite browser preview that renders a 3×3 grid and updates as you type; works for orgs and teams.
- Applied route-keyed framer-motion transitions to layout, cards, and browser views for smoother page changes.
- Continuation prompt now detects saved org or team and routes to the right next step; localized copy.
- Added loading state to plan selection to prevent double navigation.
- Refreshed Organizations welcome modal with a new animated ring illustration and better scrolling.
- Added “Skip for now” to org and team invite-by-email steps to proceed without invites.
- Calendar browser preview now focuses on a time window around “now” for a more realistic demo.
- Added an optional floating footer to keep actions visible on long, scrollable lists.
- **Refactors and Fixes**
- Unified invite browser and replaced the org preview on the org email step.
- Split and simplified legacy invite views; team and org routes are cleaner and easier to extend.
- Streamlined the team invite step by removing a redundant action; non-admins are redirected to the email invite page.
- Prevented creating teams with empty details by redirecting back to team details.
- Minor UI cleanup: tighter borders, padding, and mobile max-heights across onboarding screens.
- Hide team select on org invites when no teams exist.
<sup>Written for commit ae7f5277ab998560ae6e2f3f9144852a7b4959a7. Summary will update automatically on new commits.</sup>
<!-- End of auto-generated description by cubic. -->
* i18n
* WIP icon stuff
* More icon work
* More gradient tuning
* Mvoe plan-icon to planicon.tsx
* Fix cubic suggestion
* Fix darkmode icon and gradients
* Fix type error
* Onboarding path service
* Update usages of onboarding path and getting started hook
## What does this PR do?
This PR is stacked on https://github.com/calcom/cal.com/pull/24299 this adds the v3 flow for onboarding with teams.
<!-- This is an auto-generated description by cubic. -->
---
## Summary by cubic
Adds the v3 team onboarding flow with Details, Brand, and Invite steps, including slug validation, branding, and member invites. Updates routing to support the Team plan and creates teams with Stripe checkout when needed.
- **New Features**
- Team Details: name and slug with async availability check and URL preview.
- Team Brand: hex color picker and logo upload with live preview.
- Team Invite: add/remove emails, invite role toggle (Member/Admin), and form validation.
- State: adds teamDetails, teamBrand, and teamInvites to the onboarding store with actions.
- Creation: new useCreateTeam hook; redirects to Stripe if checkout URL is returned, or to Getting Started on success.
- Routing/Auth: protected team pages (details, brand, invite) and updates plan selection to route to /onboarding/teams.
<!-- End of auto-generated description by cubic. -->
