feat: differentiate personal/team pricing table with two-stage team workspace flow (#9901)

## Summary

Differentiates the subscription pricing dialog between personal and team
workspaces with distinct visual treatments and a two-stage team
workspace upgrade flow.

### Changes

- **Personal pricing dialog**: Shows "P" avatar badge, "Plans for
Personal Workspace" header, and "Solo use only – Need team workspace?"
banner on each tier card
- **Team pricing dialog**: Shows workspace avatar, "Plans for Team
Workspace" header (emerald), green "Invite up to X members" badge, and
emerald border on Creator card
- **Two-stage upgrade flow**: "Need team workspace?" → closes pricing →
opens CreateWorkspaceDialog → sessionStorage flag → page reload →
WorkspaceAuthGate auto-opens team pricing dialog
- **Spacing**: Reduced vertical gaps/padding/font sizes so the table
fits without scrolling

### Key decisions

- sessionStorage key `comfy:resume-team-pricing` bridges the page reload
during workspace creation
- `onChooseTeam` prop is conditionally passed only to the personal
variant
- `resumePendingPricingFlow()` is called from WorkspaceAuthGate after
workspace initialization

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9901-feat-differentiate-personal-team-pricing-table-with-two-stage-team-workspace-flow-3226d73d365081e7af60dcca86e83673)
by [Unito](https://www.unito.io)
This commit is contained in:
Hunter
2026-03-23 09:17:19 -07:00
committed by GitHub
parent bd322314bc
commit cd45efa983
32 changed files with 1426 additions and 154 deletions

View File

@@ -107,6 +107,8 @@ const i18n = createI18n({
videoEstimateHelp: 'How is this calculated?',
videoEstimateExplanation: 'Based on average usage.',
videoEstimateTryTemplate: 'Try template',
soloUseOnly: 'Solo use only',
needTeamWorkspace: 'Need team workspace?',
maxDuration: {
standard: '30 min',
creator: '30 min',
@@ -296,4 +298,20 @@ describe('PricingTable', () => {
expect(mockAccessBillingPortal).toHaveBeenCalledWith('standard-yearly')
})
})
describe('team workspace link', () => {
it('should emit chooseTeamWorkspace when clicking "Need team workspace?" link', async () => {
const wrapper = createWrapper()
await flushPromises()
const teamLink = wrapper
.findAll('button')
.find((btn) => btn.text().includes('Need team workspace?'))
expect(teamLink).toBeDefined()
await teamLink?.trigger('click')
expect(wrapper.emitted('chooseTeamWorkspace')).toHaveLength(1)
})
})
})