* fix: decouple large calendar from features
* fix: move calendar to features since this is the better approach
* chore: move OOO slots to features
* feat: add DefaultOutOfOfficeSlot fallback for calendar OOO rendering
Co-Authored-By: rajiv@cal.com <sahalrajiv6900@gmail.com>
* chore: cleanup unused LargeCalendar component
---------
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
* feat: enable onboarding-v3 globally and update e2e tests
- Add migration to set onboarding-v3 feature flag enabled=true
- Rewrite onboarding.e2e.ts for v3 flow (Plan Selection → Personal Settings → Calendar)
- Update URL assertions in signup, team-invitation, org-invitation, ab-tests-redirect, and auth tests to accept both old and new onboarding paths
Co-Authored-By: sean@cal.com <Sean@brydon.io>
* fix: use pathname-only matching in waitForURL to prevent false matches on callbackUrl query param
Co-Authored-By: sean@cal.com <Sean@brydon.io>
* use test IDs
---------
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
* 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>
2026-02-06 13:19:39 +00:00
Hariom BalharaGitHubDevin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
* fix: clear oversized images from onboarding store during migration
This fixes the 429 errors caused by large images stored in IndexedDB
before PR #27285 added cropping functionality.
Changes:
- Add version 1 to zustand persist config with migration function
- Migration clears images exceeding thresholds:
- Logos/avatars: 500KB (properly cropped are ~50-150KB)
- Banners: 1.5MB (properly cropped are ~200-500KB)
- Add comprehensive tests for migration logic
When users refresh the page, the migration runs automatically and
clears any oversized images, requiring them to re-upload using the
new cropping flow.
Co-Authored-By: hariom@cal.com <hariombalhara@gmail.com>
* fixes
* chore: remove migration test file
Co-Authored-By: hariom@cal.com <hariombalhara@gmail.com>
---------
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
2026-02-03 10:48:35 +00:00
sean-brydonGitHubDevin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
* wip flow
* add tests
* WIP migrateing view
* push back step
* fix tests and logic for adding new members to existing teams
* few UI fixes
* type fixes
* fix nits
* few UI + re-route fixes
* fix teamId when migrating
2026-01-26 17:03:12 +01:00
Benny JooGitHubDevin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
* refactor: move booking-audit client components from packages/features to apps/web/modules
This is part of the larger effort to move tRPC-dependent UI components from packages/features to apps/web/modules to eliminate circular dependencies.
Changes:
- Move BookingHistory.tsx and BookingHistoryPage.tsx to apps/web/modules/booking-audit/components/
- Update imports in apps/web to use the new location
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* refactor: move formbricks client from packages/features to apps/web/modules
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* refactor: move hooks and stores from packages/features to apps/web/modules
- Move useAppsData hook from packages/features/apps/hooks to apps/web/modules/apps/hooks
- Move onboardingStore from packages/features/ee/organizations/lib to apps/web/modules/ee/organizations/lib
- Move useWelcomeModal hook from packages/features/ee/organizations/hooks to apps/web/modules/ee/organizations/hooks
- Move useAgentsData hook from packages/features/ee/workflows/hooks to apps/web/modules/ee/workflows/hooks
- Update all import paths in consuming files
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* refactor: move onboardingStore test file to apps/web/modules
Co-Authored-By: benny@cal.com <sldisek783@gmail.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>
* refactor: Extract schedule determination to seperate fn
* refactor: Extract schedule detection to seperate file and add tests
* RouterOutputs should be used in hooks, not direct type imports
2026-01-11 19:44:09 -03:00
Pasquale VitielloGitHubDevin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>pasquale@cal.com <pasquale@cal.com>Rajiv Sahal
* fix: remove @calcom/web imports from packages/features to eliminate circular dependency
- Migrate UserTableUser and MemberPermissions types to packages/features/users/types/user-table.ts
- Migrate useGeo hook to packages/features/geo/GeoContext.tsx
- Migrate buildLegacyRequest to packages/lib/buildLegacyCtx.ts
- Migrate Calendar component to packages/features/calendars/weeklyview/components/
- Move test utilities (bookingScenario, fixtures) to packages/features/test/
- Update all imports in packages/features to use new locations
- Add re-exports in apps/web for backward compatibility
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* fix: delete original implementation files and fix type issues
- Delete original calendar component files in apps/web (keep only re-export stubs)
- Migrate OutOfOfficeInSlots to packages/features/bookings/components
- Convert apps/web OutOfOfficeInSlots to re-export stub
- Fix className vs class issue in Calendar.tsx
- Fix @calcom/trpc import violation in user-table.ts by using structural type
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* fix: add missing isGroup and contains fields to UserTableUser attributes type
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* fix: update customRole type to match actual Prisma Role model
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* fix build
* fix
* fix
* cleanup weeklyview
* fix
* refactor to mv MemberPermissions to types package
* add types dependency to features
* fix
* fix
* fix
* fix
* fix
* fix
* rename
* rename
* migrate
* migrate
* migrate
* fix
* fix
* fix
* refactor: move test utilities from packages/features/test to tests/libs
- Move bookingScenario utilities to tests/libs/bookingScenario
- Move fixtures to tests/libs/fixtures
- Update all imports in packages/features test files to use new location
- Update all imports in apps/web test files to use new location
- Eliminates duplication of test utilities between packages/features and apps/web
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* fix: correct relative import paths for tests/libs in test files
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* refactor: replace test utility implementations with re-exports to tests/libs
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* fix: fix test import paths and move signup handler tests to apps/web
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* fix: move buildLegacyCtx to packages/lib and restore handlers to packages/features
- Move buildLegacyCtx from apps/web/lib to packages/lib to break circular dependency
- Update apps/web/lib/buildLegacyCtx.ts to re-export from @calcom/lib
- Restore signup handlers and tests to packages/features/auth/signup/handlers
- Update handler imports to use @calcom/lib/buildLegacyCtx instead of @calcom/web/lib/buildLegacyCtx
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* fix: update recurring-event.test.ts imports to use tests/libs path
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* refactor: delete test re-export files and update imports to use tests/libs directly
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* fix: update remaining test imports to use tests/libs directly
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* fix: update handleRecurringEventBooking calls to match function signature (1 arg)
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* remove
* migrate tests
* migrate tests
* refactor: update test mock imports by removing and using async for mock creators.
* fix type errors
* fix: add type assertion for MockUser in p2002.test-suite.ts
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* fix: restore locale import in compareReminderBodyToTemplate.test.ts using relative path
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* feat: create @calcom/testing package and migrate tests from /tests directory
- Created new @calcom/testing package in /packages/testing
- Moved all files from /tests to /packages/testing
- Updated all imports across the codebase to use @calcom/testing alias
- Removed /tests directory at root level
This allows other packages like @calcom/features and @calcom/web to import
testing utilities using the @calcom/testing alias instead of relative paths.
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* fix
* fix
* fix: add missing useBookings export to @calcom/atoms package
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* fix: add missing useCalendarsBusyTimes and useConnectedCalendars exports to @calcom/atoms
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* chore: add @calcom/testing as explicit devDependency to packages that use it
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* refactor: move setupVitest.ts into @calcom/testing package
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* fix
* chore: add biome rules to restrict @calcom/testing imports
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* fix
* rename libs to lib
* rename libs to lib
* add rule
* add rule
* refactor: remove @calcom/features imports from @calcom/testing
- Move mockPaymentSuccessWebhookFromStripe to fresh-booking.test.ts
- Replace ProfileRepository.generateProfileUid() with uuidv4()
- Clone Tracking type into @calcom/testing/src/lib/types.ts
- Update imports in expects.ts and getMockRequestDataForBooking.ts
- Move source files into src/ folder
- Move CalendarManager mock to @calcom/features
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* fix: add explicit exports for nested paths in @calcom/testing
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* improve
* improve
* fix
* fix
* fix type checks
* fix type checks
* fix type checks
* fix tests
---------
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
2026-01-08 16:59:11 +09:00
Benny JooGitHubDevin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
* refactor: migrate UnconfirmedBookingBadge from features to apps/web
Move UnconfirmedBookingBadge.tsx from packages/features/bookings/ to
apps/web/modules/bookings/components/ as part of the architectural
refactor to remove trpc client imports from the features layer.
Also removes unused preserveBookingsQueryParams function from Navigation.tsx.
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* refactor: move shell navigation and badges to apps/web
Move shell navigation components and trpc-using badges from
packages/features to apps/web/modules to fix circular dependency:
- Move navigation folder to apps/web/modules/shell/navigation/
- Move TeamInviteBadge.tsx to apps/web/modules/shell/
- Create Shell wrapper in apps/web that provides MobileNavigationContainer
- Update all Shell imports in apps/web to use the new wrapper
- Remove MobileNavigationContainer default from features Shell.tsx
- Fix pre-existing lint warnings in touched files
This establishes the pattern for migrating React components that use
trpc hooks from the features layer to the web app layer, ensuring
proper dependency direction: apps/web imports from packages/features,
never the reverse.
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* fix: move SideBar.tsx to apps/web to fix build error
SideBar.tsx was importing Navigation from the moved navigation folder,
causing a build error. Moving SideBar.tsx to apps/web and updating the
features Shell to not have a default SidebarContainer fixes this.
The web Shell wrapper now provides both the default SidebarContainer
and MobileNavigationContainer, maintaining the injection pattern.
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* revert
* revert
* revert
* wip
* wip
* wip
* wip
* wip
* wip
* not used anywhere
* wip
* wip
* wip
* wip
* fix
* fix
* wip
* wip
* wip
* wip
* wip
* fix
* fix
* fix
* fix
* migrate
* migrate admin-adpi
* wip
* feat: migrate organization settings components from packages/features to apps/web/modules
- Migrate profile.tsx, appearance.tsx, general.tsx, privacy.tsx, guest-notifications.tsx, delegationCredential.tsx, other-team-members-view.tsx, other-team-profile-view.tsx
- Migrate attributes directory (AttributesForm.tsx, DeleteAttributeModal.tsx, ListSkeleton.tsx, attributes-create-view.tsx, attributes-edit-view.tsx, attributes-list-view.tsx)
- Migrate admin directory (AdminOrgEditPage.tsx, AdminOrgPage.tsx, WorkspacePlatformPage.tsx)
- Update all page imports to use new paths from ~/settings/organizations/
- Update relative imports in migrated files to use @calcom/features paths
- Fix lint warnings in migrated files
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* fix: update test import path after migration
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* fix: remove unnecessary test-setup import (already in vitest config)
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* wip
* refactor: delete original files after migration to apps/web/modules
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* fix
* fix
* fix
* fix
* wip
* refactor more
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* mv
* update import paths
* wip
* wip
* fix
* fix
* fix
* fix
* fix
* fix
* fix
* mv
* mv
* mv
* fix
* wip
* wip
* fix
* fix
* fix
* fix: make test mocks resilient to vi.resetAllMocks()
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* fix: fix AttributeForm test failures
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* fix
* fix
* refactor: move ee files to apps/web/modules/ee/ folder
- Move teams, workflows, and organizations folders to apps/web/modules/ee/
- Add LICENSE file to apps/web/modules/ee/
- Update all import paths from ~/teams/ to ~/ee/teams/
- Update all import paths from ~/settings/organizations/ to ~/ee/organizations/
- Remove duplicate MemberInvitationModal copy.tsx file
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* fix: move useHasPaidPlan and dependent files to apps/web/modules
- Move useHasPaidPlan.ts from packages/features/billing/hooks to apps/web/modules/billing/hooks
- Move intercom files from packages/features/ee/support to apps/web/modules/ee/support
- Move ContactMenuItem.tsx and dependencies (freshchat, helpscout, zendesk) to apps/web/modules/ee/support
- Move ViewRecordingsDialog.tsx and RecordingListSkeleton to apps/web/modules/ee/video
- Move CalVideoSettings.tsx to apps/web/modules/eventtypes/components/locations
- Move CreateOrEditOutOfOfficeModal.tsx to apps/web/modules/settings/outOfOffice
- Refactor UpgradeTeamsBadge to accept props and create wrapper in apps/web/modules/billing
- Update all callers to use new file locations
- Add eslint-disable comments for pre-existing lint warnings
This fixes the tRPC server build failure caused by circular dependency where
the server build was traversing into packages/features and pulling in React
hooks that depend on @calcom/trpc/react types.
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* fix: correct UpgradeTeamsBadge import path to use package export
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* fix
* fix
* fix
* fix
* fix
* fix
* fix
* fix: pass plan state through SelectProps to UpgradeTeamsBadge
- Add upgradeTeamsBadgeProps field to ExtendedOption type in Select component
- Update OptionComponent to spread upgradeTeamsBadgeProps to UpgradeTeamsBadge
- Update getOptions.ts to accept PlanState object and include upgradeTeamsBadgeProps
- Update WorkflowStepContainer.tsx to pass planState to getWorkflowTriggerOptions/getWorkflowTemplateOptions
- Update WorkflowDetailsPage.tsx to pass upgradeTeamsBadgeProps in transformed action options
- Update AddActionDialog.tsx interface and mapping to include upgradeTeamsBadgeProps
- Add eslint-disable comments for pre-existing React Hook dependency warnings
This fixes the UpgradeTeamsBadge refactoring issue where the badge was always showing
'upgrade' text instead of the correct text based on plan state (trial_mode, inactive_team_plan, etc.)
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* fix: update import paths to use /ee/ folder for workflows and organizations
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* fix: update workflow component imports to use /ee/ folder
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* fix: add missing types.ts for LocationInput.tsx
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* fix: extract BookingRedirectForm type to shared location
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* fix
* wip
* wip
* fix: update BookingRedirectForm import to use local types file
Co-Authored-By: benny@cal.com <sldisek783@gmail.com>
* wip
* fix
* fix
---------
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
* reset store
* Update apps/web/modules/onboarding/getting-started/onboarding-view.tsx
Co-authored-by: Eunjae Lee <hey@eunjae.dev>
---------
Co-authored-by: Eunjae Lee <hey@eunjae.dev>
## What does this PR do?
Fixes the issue where form state wasnt corectly recorded in QA
## Visual Demo (For contributors especially)
A visual demonstration is strongly recommended, for both the original and new change **(video / image - any one)**.
#### Video Demo (if applicable):
- Show screen recordings of the issue or feature.
- Demonstrate how to reproduce the issue, the behavior before and after the change.
#### Image Demo (if applicable):
- Add side-by-side screenshots of the original and updated change.
- Highlight any significant change(s).
## 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](https://cal.com/docs). 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.
## How should this be tested?
<!-- Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration. Write details that help to start the tests -->
- Are there environment variables that should be set?
- What are the minimal test data to have?
- What is expected (happy path) to have (input and output)?
- Any other important info that could help to test that PR
## 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
## 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. -->
## What does this PR do?
- Redesigns the organization onboarding flow by merging the brand and details pages
- Improves the organization details page with a scrollable interface and visual previews
- Adds a new organization-specific browser preview component
## Visual Demo (For contributors especially)
#### Image Demo:
- The PR replaces the separate brand page with an integrated details page that includes logo and banner uploads
- The new organization browser view shows a preview of the organization profile with the selected branding
## Mandatory Tasks (DO NOT REMOVE)
- [ ] I have self-reviewed the code.
- [ ] 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.
## How should this be tested?
- Go through the organization onboarding flow
- Test uploading logos and banners
- Verify that the organization browser preview updates in real-time with the form inputs
- Confirm that the form validation works correctly for organization name and slug
- Check that the scrollable interface works properly with fade effects at top and bottom
## Checklist
- I have read the [contributing guide](https://github.com/calcom/cal.com/blob/main/CONTRIBUTING.md)
- My code follows the style guidelines of this project
- I have commented my code, particularly in hard-to-understand areas
- I have checked if my changes generate no new warnings
<!-- This is an auto-generated description by cubic. -->
---
## Summary by cubic
Split organization brand from the details step and added live previews for organizations and teams. Revamped org/team invites with reusable components, a dedicated email-invite page, and a CSV upload modal.
- **New Features**
- Separate Brand step with logo, banner, and color; instant org preview via OnboardingOrganizationBrowserView.
- Teams browser preview added; invites include email substep (/onboarding/organization/invite/email, /onboarding/teams/invite/email), CSV upload (template + parsing), and Google Workspace (behind flag).
- Shared components (EmailInviteForm, InviteOptions, RoleSelector) used across org and team invites.
- **Refactors**
- Updated org flow: Details → Brand → Teams → Invites; OnboardingLayout now supports dynamic step counts (org=4, team=3, personal=2).
- UI polish (OnboardingCard header padding) and org-specific previews now replace generic views across details/brand/invites/teams; ensured org welcome modal takes precedence over personal.
<sup>Written for commit d9b55c0b5505aa0d4ca1c4298a513bcd90606915. Summary will update automatically on new commits.</sup>
<!-- End of auto-generated description by cubic. -->
## What does this PR do?
<!-- Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change. -->
- Fixes #XXXX (GitHub issue number)
- Fixes CAL-XXXX (Linear issue number - should be visible at the bottom of the GitHub issue description)
## Visual Demo (For contributors especially)
A visual demonstration is strongly recommended, for both the original and new change **(video / image - any one)**.
#### Video Demo (if applicable):
- Show screen recordings of the issue or feature.
- Demonstrate how to reproduce the issue, the behavior before and after the change.
#### Image Demo (if applicable):
- Add side-by-side screenshots of the original and updated change.
- Highlight any significant change(s).
## 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](https://cal.com/docs). 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.
## How should this be tested?
<!-- Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration. Write details that help to start the tests -->
- Are there environment variables that should be set?
- What are the minimal test data to have?
- What is expected (happy path) to have (input and output)?
- Any other important info that could help to test that PR
## 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
Polished the onboarding experience with a live calendar preview, a team bio field, and improved username handling. Updated i18n strings and added responsive breakpoints for large screens.
- **New Features**
- Added right-column previews: OnboardingBrowserView in org teams and a live weekly OnboardingCalendarBrowserView for personal calendar setup.
- Introduced team bio in onboarding store and UI.
- Expanded i18n: team bio, browser view labels, and CSV invite flow.
- Added Tailwind screens for 3xl and 4xl to improve large-display layouts.
- **Bug Fixes**
- Normalized usernames with slugify on default and change to prevent invalid slugs.
- Unified disabled/readonly handling for premium vs. standard username fields; respects external disabled prop and org membership.
<sup>Written for commit 7804fad66ee516b25e22fc0d9239f3d29249189a. Summary will update automatically on new commits.</sup>
<!-- End of auto-generated description by cubic. -->
## What does this PR do?
- Adds a welcome modal for new Cal.com users
- Implements timezone display in the weekly calendar view
- Creates a hook for fetching onboarding calendar events
## Visual Demo (For contributors especially)
#### Image Demo:
## Mandatory Tasks
- [x] I have self-reviewed the code
- [x] I have updated the developer docs in /docs
- [x] I confirm automated tests are in place that prove my fix is effective or that my feature works.
## How should this be tested?
1. **Welcome Modal:**
- Create a new user account
- Verify the welcome modal appears with correct content
- Test the "Continue" button closes the modal
- Check that the modal can be triggered via URL parameter `?welcomeToCalcomModal=true`
2. **Timezone Display:**
- Go to the weekly calendar view
- Verify the timezone is displayed correctly when `showTimezone` is enabled
- Test with different timezones to ensure proper formatting
3. **Onboarding Calendar Events:**
- Test the hook by connecting a calendar during onboarding
- Verify events are fetched and displayed correctly
- Check that events refresh when new calendars are connected
## Checklist
- I have read the [contributing guide](https://github.com/calcom/cal.com/blob/main/CONTRIBUTING.md)
- My code follows the style guidelines of this project
- I have commented my code, particularly in hard-to-understand areas
- I have checked if my changes generate no new warnings
## What does this PR do?
- Redesigns and streamlines the onboarding flow for personal, team, and organization accounts
- Consolidates shared components and improves code organization
- Adds browser preview for better user experience during onboarding
- Simplifies the personal onboarding flow by removing the video integration step
- Enhances team onboarding with CSV upload functionality
## Visual Demo (For contributors especially)
#### Image Demo:
- The PR adds a new browser preview component that shows users how their profile/team will look during onboarding
- Redesigned UI with a more consistent layout across all onboarding steps
- Improved mobile responsiveness with better component organization
## Mandatory Tasks (DO NOT REMOVE)
- [x] I have self-reviewed the code.
- [x] 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.
- [x] I confirm automated tests are in place that prove my fix is effective or that my feature works.
## How should this be tested?
1. Test the complete onboarding flow for personal accounts:
- Start at `/onboarding/getting-started`
- Proceed through personal details and calendar setup
- Verify the flow completes successfully
2. Test the team onboarding flow:
- Start at `/onboarding/getting-started` and select team
- Complete team details
- Test the invite options including CSV upload
- Verify team creation works correctly
3. Test the organization onboarding flow:
- Start at `/onboarding/getting-started` and select organization
- Complete organization details and branding
- Test member invitations
- Verify organization creation works correctly
4. Verify browser preview functionality:
- Check that the preview updates in real-time as you enter information
- Confirm it displays correctly on different screen sizes
## Checklist
- I have read the [contributing guide](https://github.com/calcom/cal.com/blob/main/CONTRIBUTING.md)
- My code follows the style guidelines of this project
- I have commented my code, particularly in hard-to-understand areas
- I have checked if my changes generate no new warnings
## What does this PR do?
Creates new onboarding UI components for the user onboarding flow, including:
- `OnboardingCard` - A reusable card component with title, subtitle, content, and footer sections
- `OnboardingLayout` - A layout component with progress indicators and sign-out functionality
- `OnboardingBrowserView` - A browser preview showing how the user's booking page will look
- `OnboardingCalendarBrowserView` - A calendar preview showing sample events
- `OnboardingInviteBrowserView` - A preview of the team invitation email
- Enhanced `PlanIcon` component with new variants and animations for organization and team plans
## Visual Demo (For contributors especially)
#### Image Demo:
The PR adds several visual components for the onboarding flow, including browser previews, calendar views, and animated plan icons with concentric rings and user avatars.
## Mandatory Tasks (DO NOT REMOVE)
- [x] I have self-reviewed the code.
- [x] 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.
- [x] I confirm automated tests are in place that prove my fix is effective or that my feature works.
## How should this be tested?
- Navigate to the onboarding flow to see the new components in action
- Test the layout with different screen sizes to ensure responsive behavior
- Verify that the browser previews render correctly with sample data
- Check that the plan icon animations work properly for different variants (single, team, organization)
- Ensure the calendar view displays sample events correctly
## Checklist
- I have read the [contributing guide](https://github.com/calcom/cal.com/blob/main/CONTRIBUTING.md)
- My code follows the style guidelines of this project
- I have commented my code, particularly in hard-to-understand areas
- I have checked if my changes generate no new warnings
## What does this PR do?
Adds a welcome modal for new organizations that appears after organization creation. The modal showcases key features of the Organizations plan and provides a better onboarding experience.
## Visual Demo (For contributors especially)
#### Image Demo:
## Mandatory Tasks (DO NOT REMOVE)
- [x] I have self-reviewed the code.
- [x] I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. N/A
- [x] I confirm automated tests are in place that prove my fix is effective or that my feature works.
## How should this be tested?
1. Create a new organization through either:
- The onboarding flow
- The settings/organizations/new page
- The organization creation form
2. After successful creation and redirect, verify the welcome modal appears showing organization features.
3. Verify the modal can be closed by:
- Clicking the "Continue" button
- Clicking outside the modal
- Pressing ESC key
4. Verify the modal doesn't reappear after being closed (query param and session storage should be cleared).
## Checklist
- I have read the [contributing guide](https://github.com/calcom/cal.com/blob/main/CONTRIBUTING.md)
- My code follows the style guidelines of this project
- I have commented my code, particularly in hard-to-understand areas
- I have checked if my changes generate no new warnings
