diff --git a/src/platform/cloud/subscription/composables/useSubscriptionDialog.test.ts b/src/platform/cloud/subscription/composables/useSubscriptionDialog.test.ts index 91902df3ab..9c5e99cde7 100644 --- a/src/platform/cloud/subscription/composables/useSubscriptionDialog.test.ts +++ b/src/platform/cloud/subscription/composables/useSubscriptionDialog.test.ts @@ -79,6 +79,17 @@ vi.mock('@/platform/workspace/composables/useWorkspaceUI', () => ({ }) })) +function expectRekaPricingDialogProps( + dialogComponentProps: Record +) { + expect(dialogComponentProps).toMatchObject({ + renderer: 'reka', + size: 'full' + }) + expect(dialogComponentProps).not.toHaveProperty('style') + expect(dialogComponentProps).not.toHaveProperty('pt') +} + describe('useSubscriptionDialog', () => { beforeEach(() => { vi.clearAllMocks() @@ -136,11 +147,7 @@ describe('useSubscriptionDialog', () => { showPricingTable() const { dialogComponentProps } = mockShowLayoutDialog.mock.calls[0][0] - // Reka (the default renderer) sizes via size/contentClass; a PrimeVue - // `style` width is silently ignored and collapses the wide table to the - // default md (576px) frame. - expect(dialogComponentProps).toHaveProperty('contentClass') - expect(dialogComponentProps).not.toHaveProperty('style') + expectRekaPricingDialogProps(dialogComponentProps) }) it('defaults to the personal tab in a personal workspace', () => { @@ -174,6 +181,8 @@ describe('useSubscriptionDialog', () => { const props = mockShowLayoutDialog.mock.calls[0][0].props expect(props).toHaveProperty('onChooseTeam') + const { dialogComponentProps } = mockShowLayoutDialog.mock.calls[0][0] + expectRekaPricingDialogProps(dialogComponentProps) }) it('routes an existing per-member (legacy) team subscriber to the old team table', () => { @@ -194,6 +203,21 @@ describe('useSubscriptionDialog', () => { expect(props).not.toHaveProperty('onChooseTeam') }) + it('sizes the legacy workspace pricing dialog via Reka contentClass', () => { + mockShouldUseWorkspaceBilling.value = true + mockIsInPersonalWorkspace.value = false + mockIsLegacyTeamPlan.value = true + const { showPricingTable } = useSubscriptionDialog() + + showPricingTable() + + const { dialogComponentProps } = mockShowLayoutDialog.mock.calls[0][0] + expect(dialogComponentProps).toMatchObject({ + modal: false + }) + expectRekaPricingDialogProps(dialogComponentProps) + }) + it('keeps a non-legacy (credit-slider) team subscriber on the unified table', () => { mockShouldUseWorkspaceBilling.value = true mockIsInPersonalWorkspace.value = false diff --git a/src/platform/cloud/subscription/composables/useSubscriptionDialog.ts b/src/platform/cloud/subscription/composables/useSubscriptionDialog.ts index 17f1fafc4a..afd941073b 100644 --- a/src/platform/cloud/subscription/composables/useSubscriptionDialog.ts +++ b/src/platform/cloud/subscription/composables/useSubscriptionDialog.ts @@ -80,19 +80,12 @@ export const useSubscriptionDialog = () => { trackModalOpened(options?.reason) - // Shared dialog shell styling for both variants. - const dialogComponentProps = { - style: 'width: min(1328px, 95vw); max-height: 958px;', - pt: { - root: { - class: 'rounded-2xl bg-transparent h-full' - }, - content: { - class: - '!p-0 rounded-2xl border border-border-default bg-secondary-background shadow-[0_25px_80px_rgba(5,6,12,0.45)] h-full' - } - } - } + const legacyPricingDialogProps = { + renderer: 'reka', + size: 'full', + contentClass: + 'sm:max-w-7xl max-h-[90vh] rounded-2xl border border-border-default bg-secondary-background shadow-[0_25px_80px_rgba(5,6,12,0.45)]' + } as const // Jun-5 model: a single unified pricing table (personal/team plan toggle on // one workspace) for workspaces on the consolidated billing flow. Replaces @@ -120,7 +113,10 @@ export const useSubscriptionDialog = () => { // The legacy table hosts a PrimeVue Popover teleported to body; Reka // modal mode traps focus and disables body pointer-events, making it // unclickable. The unified table has no such overlay. - dialogComponentProps: { ...dialogComponentProps, modal: false } + dialogComponentProps: { + ...legacyPricingDialogProps, + modal: false + } }) return } @@ -144,7 +140,7 @@ export const useSubscriptionDialog = () => { dialogComponentProps: { // Reka (the default renderer) sizes via size/contentClass; a PrimeVue // `style` width is ignored here and collapses the table to the default - // `md` frame. `w-fit` lets each step hug its content — the pricing + // `md` frame. `w-fit` lets each step hug its content -- the pricing // table fills its 1280px content while the compact confirm/success // steps shrink (the content root sets its own width per checkoutStep). renderer: 'reka', @@ -167,7 +163,7 @@ export const useSubscriptionDialog = () => { reason: options?.reason, onChooseTeam: () => startTeamWorkspaceUpgradeFlow() }, - dialogComponentProps + dialogComponentProps: legacyPricingDialogProps }) }