@taskforcehq/taskforce 0.3.304 → 0.3.306

package/dist/components/views/PlanComparisonPage.test.js

@@ -15,11 +15,12 @@ describe('PlanComparisonPage', () => {
                 },
                 plans: [
                     {
-                        planId: 'starter',
-                        displayName: 'Starter',
+                        planId: 'free',
+                        displayName: 'Free',
+                        description: 'Start using Taskforce at no cost.',
                         status: 'active',
                         defaultVersion: {
-                            planVersionId: 'starter-v1',
+                            planVersionId: 'free-v1',
                             versionNumber: 1,
                             seatLimit: null,
                             metadata: {}
@@ -31,19 +32,20 @@ describe('PlanComparisonPage', () => {
                         }
                     },
                     {
-                        planId: 'collab',
-                        displayName: 'Collab',
+                        planId: 'team-5',
+                        displayName: 'Team 5',
+                        description: 'For small collaborative teams.',
                         status: 'active',
                         defaultVersion: {
-                            planVersionId: 'collab-v2',
+                            planVersionId: 'team-5-v2',
                             versionNumber: 2,
                             seatLimit: 5,
                             metadata: {}
                         },
                         features: [],
                         pricing: {
-                            month: { pricingType: 'stripe', stripePriceId: 'price_collab_month', unitAmount: 2000, currency: 'usd', interval: 'month' },
-                            year: { pricingType: 'stripe', stripePriceId: 'price_collab_year', unitAmount: 20000, currency: 'usd', interval: 'year' }
+                            month: { pricingType: 'stripe', stripePriceId: 'price_team_5_month', unitAmount: 2000, currency: 'usd', interval: 'month' },
+                            year: { pricingType: 'stripe', stripePriceId: 'price_team_5_year', unitAmount: 20000, currency: 'usd', interval: 'year' }
                         }
                     }
                 ]
@@ -59,6 +61,11 @@ describe('PlanComparisonPage', () => {
         render(_jsx(PlanComparisonPage, { heading: "Subscription Plans", isAuthenticated: false, onBack: () => { }, backLabel: "Back", onSelectPlan: () => { } }));
         expect(await screen.findByText('Pricing source: production (cloud)')).toBeInTheDocument();
     });
+    it('renders plan descriptions when provided by the pricing payload', async () => {
+        render(_jsx(PlanComparisonPage, { heading: "Subscription Plans", isAuthenticated: false, onBack: () => { }, backLabel: "Back", onSelectPlan: () => { } }));
+        expect(await screen.findByText('Start using Taskforce at no cost.')).toBeInTheDocument();
+        expect(screen.getByText('For small collaborative teams.')).toBeInTheDocument();
+    });
     it('falls back to provided pricing source details when the pricing response omits them', async () => {
         globalThis.__DEBUG_MODE__ = true;
         vi.stubGlobal('fetch', vi.fn(async () => ({
@@ -66,11 +73,11 @@ describe('PlanComparisonPage', () => {
             json: async () => ({
                 plans: [
                     {
-                        planId: 'starter',
-                        displayName: 'Starter',
+                        planId: 'free',
+                        displayName: 'Free',
                         status: 'active',
                         defaultVersion: {
-                            planVersionId: 'starter-v1',
+                            planVersionId: 'free-v1',
                             versionNumber: 1,
                             seatLimit: null,
                             metadata: {}
@@ -92,29 +99,270 @@ describe('PlanComparisonPage', () => {
         await screen.findByRole('heading', { name: 'Subscription Plans' });
         expect(screen.queryByText('Pricing source: production (cloud)')).not.toBeInTheDocument();
     });
+    it('renders public feature copy when provided by the pricing payload', async () => {
+        vi.stubGlobal('fetch', vi.fn(async () => ({
+            ok: true,
+            json: async () => ({
+                pricingSource: {
+                    environment: 'production',
+                    runtimeMode: 'cloud'
+                },
+                plans: [
+                    {
+                        planId: 'team-5',
+                        displayName: 'Team 5',
+                        status: 'active',
+                        defaultVersion: {
+                            planVersionId: 'team-5-v2',
+                            versionNumber: 2,
+                            seatLimit: 5,
+                            metadata: {}
+                        },
+                        features: [
+                            {
+                                featureKey: 'collaboration.ai_profiles',
+                                access: 'enabled',
+                                label: 'AI Profiles',
+                                publicLabel: 'AI teammates',
+                                publicDescription: 'Add reusable AI teammates to your workspace.'
+                            }
+                        ],
+                        pricing: {
+                            month: { pricingType: 'stripe', stripePriceId: 'price_team_5_month', unitAmount: 2000, currency: 'usd', interval: 'month' },
+                            year: null
+                        }
+                    }
+                ]
+            })
+        })));
+        render(_jsx(PlanComparisonPage, { heading: "Subscription Plans", isAuthenticated: false, onBack: () => { }, backLabel: "Back", onSelectPlan: () => { } }));
+        expect(await screen.findByText('AI teammates')).toBeInTheDocument();
+        expect(screen.getByText('Add reusable AI teammates to your workspace.')).toBeInTheDocument();
+        expect(screen.queryByText('Collaboration Ai Profiles')).not.toBeInTheDocument();
+    });
+    it('renders inline numeric feature limits next to each feature label', async () => {
+        vi.stubGlobal('fetch', vi.fn(async () => ({
+            ok: true,
+            json: async () => ({
+                pricingSource: {
+                    environment: 'production',
+                    runtimeMode: 'cloud'
+                },
+                plans: [
+                    {
+                        planId: 'free',
+                        displayName: 'Free',
+                        status: 'active',
+                        defaultVersion: {
+                            planVersionId: 'free-v1',
+                            versionNumber: 1,
+                            seatLimit: 12,
+                            metadata: {}
+                        },
+                        features: [
+                            {
+                                featureKey: 'workspace.workspaces',
+                                access: 'enabled',
+                                label: 'Workspaces',
+                                config: { maxWorkspaces: 1 }
+                            },
+                            {
+                                featureKey: 'collaboration.ai_profiles',
+                                access: 'limited',
+                                label: 'AI Profiles',
+                                publicLabel: 'AI Agents',
+                                config: { maxAiProfiles: 4 }
+                            },
+                            {
+                                featureKey: 'context.uploads',
+                                access: 'enabled',
+                                label: 'Cloud Storage',
+                                config: { storageLimitMb: 24 }
+                            },
+                            {
+                                featureKey: 'collaboration.team_management',
+                                access: 'enabled',
+                                label: 'Team Management'
+                            }
+                        ],
+                        pricing: {
+                            month: { pricingType: 'free', stripePriceId: null, unitAmount: null, currency: null, interval: 'month' },
+                            year: null
+                        }
+                    }
+                ]
+            })
+        })));
+        const { container } = render(_jsx(PlanComparisonPage, { heading: "Subscription Plans", isAuthenticated: false, onBack: () => { }, backLabel: "Back", onSelectPlan: () => { } }));
+        const freeCard = await screen.findByTestId('plan-card-free');
+        const featureTextNodes = Array.from(freeCard.querySelectorAll('span')).map((node) => node.textContent);
+        expect(featureTextNodes).toContain('1x Workspaces');
+        expect(featureTextNodes).toContain('4x AI Agents');
+        expect(featureTextNodes).toContain('24MB Cloud Storage');
+        expect(featureTextNodes).toContain('12x Team Management');
+        expect(container.querySelector('[class*="featureLimitUnit"]')?.textContent).toBe('MB');
+    });
+    it('renders the storage unit suffix in a smaller accent span', async () => {
+        vi.stubGlobal('fetch', vi.fn(async () => ({
+            ok: true,
+            json: async () => ({
+                pricingSource: {
+                    environment: 'production',
+                    runtimeMode: 'cloud'
+                },
+                plans: [
+                    {
+                        planId: 'free',
+                        displayName: 'Free',
+                        status: 'active',
+                        defaultVersion: {
+                            planVersionId: 'free-v1',
+                            versionNumber: 1,
+                            seatLimit: null,
+                            metadata: {}
+                        },
+                        features: [
+                            {
+                                featureKey: 'context.uploads',
+                                access: 'enabled',
+                                label: 'Cloud Storage',
+                                config: { storageLimitMb: 64 }
+                            }
+                        ],
+                        pricing: {
+                            month: { pricingType: 'free', stripePriceId: null, unitAmount: null, currency: null, interval: 'month' },
+                            year: null
+                        }
+                    }
+                ]
+            })
+        })));
+        const { container } = render(_jsx(PlanComparisonPage, { heading: "Subscription Plans", isAuthenticated: false, onBack: () => { }, backLabel: "Back", onSelectPlan: () => { } }));
+        await screen.findByText('Cloud Storage');
+        const accent = container.querySelector('[class*="featureLimitAccent"]');
+        const unit = container.querySelector('[class*="featureLimitUnit"]');
+        expect(accent?.textContent).toBe('64MB');
+        expect(unit?.textContent).toBe('MB');
+    });
+    it('hides missing yearly pricing rows and buttons instead of rendering unavailable state', async () => {
+        vi.stubGlobal('fetch', vi.fn(async () => ({
+            ok: true,
+            json: async () => ({
+                pricingSource: {
+                    environment: 'production',
+                    runtimeMode: 'cloud'
+                },
+                plans: [
+                    {
+                        planId: 'operator',
+                        displayName: 'Operator',
+                        status: 'active',
+                        defaultVersion: {
+                            planVersionId: 'operator-v1',
+                            versionNumber: 1,
+                            seatLimit: null,
+                            metadata: {}
+                        },
+                        features: [],
+                        pricing: {
+                            month: { pricingType: 'stripe', stripePriceId: 'price_operator_month', unitAmount: 999, currency: 'usd', interval: 'month' },
+                            year: null
+                        }
+                    }
+                ]
+            })
+        })));
+        render(_jsx(PlanComparisonPage, { heading: "Subscription Plans", isAuthenticated: true, onBack: () => { }, backLabel: "Back", onSelectPlan: () => { } }));
+        const operatorCard = await screen.findByTestId('plan-card-operator');
+        expect(within(operatorCard).getByText('$9.99')).toBeInTheDocument();
+        expect(within(operatorCard).getByText('/ month')).toBeInTheDocument();
+        expect(within(operatorCard).queryByText('/ year')).not.toBeInTheDocument();
+        expect(within(operatorCard).queryByText('Unavailable')).not.toBeInTheDocument();
+        expect(within(operatorCard).getByRole('button', { name: 'Choose Monthly' })).toBeInTheDocument();
+        expect(within(operatorCard).queryByRole('button', { name: 'Choose Yearly' })).not.toBeInTheDocument();
+    });
     it('does not mark a plan current when only the plan id matches but the version does not', async () => {
-        render(_jsx(PlanComparisonPage, { heading: "Subscription Plans", isAuthenticated: true, currentPlanId: "collab", currentPlanVersionId: "collab-v1", currentEntitlementState: "active", onBack: () => { }, backLabel: "Back", onSelectPlan: () => { } }));
+        render(_jsx(PlanComparisonPage, { heading: "Subscription Plans", isAuthenticated: true, currentPlanId: "team-5", currentPlanVersionId: "team-5-v1", currentEntitlementState: "active", onBack: () => { }, backLabel: "Back", onSelectPlan: () => { } }));
+        expect(await screen.findByRole('heading', { name: 'Subscription Plans' })).toBeInTheDocument();
+        expect(screen.queryByText('Current Plan')).not.toBeInTheDocument();
+    });
+    it('marks a trialing entitlement as the current plan', async () => {
+        render(_jsx(PlanComparisonPage, { heading: "Subscription Plans", isAuthenticated: true, currentPlanId: "team-5", currentPlanVersionId: "team-5-v2", currentEntitlementState: "trialing", onBack: () => { }, backLabel: "Back", onSelectPlan: () => { } }));
+        expect(await screen.findByRole('heading', { name: 'Subscription Plans' })).toBeInTheDocument();
+        expect(screen.getByText('Current Plan')).toBeInTheDocument();
+    });
+    it('can show the current plan as a non-interactive indicator when billing is managed from page chrome', async () => {
+        const onSelectPlan = vi.fn();
+        render(_jsx(PlanComparisonPage, { heading: "Subscription Plans", isAuthenticated: true, currentPlanId: "team-5", currentPlanVersionId: "team-5-v2", currentEntitlementState: "active", canManageCurrentPlan: true, currentPlanCardActionMode: "indicator", onBack: () => { }, backLabel: "Back", onSelectPlan: onSelectPlan }));
+        expect(await screen.findByRole('heading', { name: 'Subscription Plans' })).toBeInTheDocument();
+        const currentCard = screen.getByTestId('plan-card-team-5');
+        expect(currentCard).not.toHaveAttribute('role', 'button');
+        expect(screen.queryByTestId('plan-manage-team-5')).not.toBeInTheDocument();
+        expect(screen.queryByRole('button', { name: 'Manage Plan' })).not.toBeInTheDocument();
+        expect(screen.getByTestId('plan-current-team-5')).toBeDisabled();
+        fireEvent.click(currentCard);
+        expect(onSelectPlan).not.toHaveBeenCalled();
+    });
+    it('can render the page header bar even when shell chrome is present', async () => {
+        render(_jsx(PlanComparisonPage, { heading: "Subscription Plans", isAuthenticated: true, chrome: _jsx("div", { children: "Shell chrome" }), showHeaderBarWithChrome: true, topActions: _jsx("button", { type: "button", children: "Manage billing" }), onBack: () => { }, backLabel: "Back to App", onSelectPlan: () => { } }));
+        expect(await screen.findByRole('heading', { name: 'Subscription Plans' })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Back to App' })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Manage billing' })).toBeInTheDocument();
+    });
+    it('does not mark a canceled entitlement as current through the plan-id fallback path', async () => {
+        render(_jsx(PlanComparisonPage, { heading: "Subscription Plans", isAuthenticated: true, currentPlanId: "team-5", currentPlanVersionId: null, currentEntitlementState: "canceled", onBack: () => { }, backLabel: "Back", onSelectPlan: () => { } }));
+        expect(await screen.findByRole('heading', { name: 'Subscription Plans' })).toBeInTheDocument();
+        expect(screen.queryByText('Current Plan')).not.toBeInTheDocument();
+    });
+    it('does not mark a linked pending-plan-selection entitlement as the current plan', async () => {
+        render(_jsx(PlanComparisonPage, { heading: "Subscription Plans", isAuthenticated: true, currentPlanId: "team-5", currentPlanVersionId: "team-5-v2", currentEntitlementState: "pending_plan_selection", canManageCurrentPlan: true, onBack: () => { }, backLabel: "Back", onSelectPlan: () => { } }));
         expect(await screen.findByRole('heading', { name: 'Subscription Plans' })).toBeInTheDocument();
+        expect(screen.queryByRole('button', { name: 'Manage Plan' })).not.toBeInTheDocument();
         expect(screen.queryByText('Current Plan')).not.toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Choose Monthly' })).toBeInTheDocument();
     });
     it('can disable the page back button while onboarding remains blocked', async () => {
         render(_jsx(PlanComparisonPage, { heading: "Subscription Plans", isAuthenticated: true, onBack: () => { }, backLabel: "Back to App", backDisabled: true, onSelectPlan: () => { } }));
         expect(await screen.findByRole('button', { name: 'Back to App' })).toBeDisabled();
     });
+    it('shows pricing before auth resolves but keeps plan selection disabled until bootstrap finishes', async () => {
+        const onSelectPlan = vi.fn();
+        const view = render(_jsx(PlanComparisonPage, { heading: "Subscription Plans", isAuthenticated: false, authSessionResolved: false, onBack: () => { }, backLabel: "Back", onSelectPlan: onSelectPlan }));
+        expect(await screen.findByRole('heading', { name: 'Subscription Plans' })).toBeInTheDocument();
+        const freeCard = screen.getByTestId('plan-card-free');
+        expect(screen.getByRole('button', { name: 'Get Started Free' })).toBeDisabled();
+        expect(screen.getByRole('button', { name: 'Get Started Monthly' })).toBeDisabled();
+        expect(freeCard).not.toHaveAttribute('role', 'button');
+        view.rerender(_jsx(PlanComparisonPage, { heading: "Subscription Plans", isAuthenticated: false, authSessionResolved: true, onBack: () => { }, backLabel: "Back", onSelectPlan: onSelectPlan }));
+        const enabledFreeCard = screen.getByTestId('plan-card-free');
+        expect(screen.getByRole('button', { name: 'Get Started Free' })).toBeEnabled();
+        expect(screen.getByRole('button', { name: 'Get Started Monthly' })).toBeEnabled();
+        expect(enabledFreeCard).toHaveAttribute('role', 'button');
+        fireEvent.click(screen.getByRole('button', { name: 'Get Started Free' }));
+        await waitFor(() => {
+            expect(onSelectPlan).toHaveBeenCalledWith({
+                planId: 'free',
+                planVersionId: 'free-v1',
+                interval: 'month',
+                pricingType: 'free',
+                isCurrentPlan: false
+            });
+        });
+    });
     it('selects the whole plan card using the default available interval', async () => {
         const onSelectPlan = vi.fn();
         render(_jsx(PlanComparisonPage, { heading: "Subscription Plans", isAuthenticated: false, onBack: () => { }, backLabel: "Back", onSelectPlan: onSelectPlan }));
         await screen.findByRole('heading', { name: 'Subscription Plans' });
-        const starterHeading = screen.getByRole('heading', { name: 'Starter' });
-        const starterCard = starterHeading.closest('[role="button"]');
-        expect(starterCard).toBeTruthy();
-        expect(within(starterCard).getByText('$0.00')).toBeInTheDocument();
-        expect(within(starterCard).getByText('/ month')).toBeInTheDocument();
-        fireEvent.click(starterCard);
+        const freeHeading = screen.getByRole('heading', { name: 'Free' });
+        const freeCard = freeHeading.closest('[role="button"]');
+        expect(freeCard).toBeTruthy();
+        expect(within(freeCard).getByText('$0.00')).toBeInTheDocument();
+        expect(within(freeCard).getByText('/ month')).toBeInTheDocument();
+        fireEvent.click(freeCard);
         await waitFor(() => {
             expect(onSelectPlan).toHaveBeenCalledWith({
-                planId: 'starter',
-                planVersionId: 'starter-v1',
+                planId: 'free',
+                planVersionId: 'free-v1',
                 interval: 'month',
                 pricingType: 'free',
                 isCurrentPlan: false
@@ -123,7 +371,7 @@ describe('PlanComparisonPage', () => {
     });
     it('does not trigger current-plan actions when the current plan is not Stripe-managed', async () => {
         const onSelectPlan = vi.fn();
-        render(_jsx(PlanComparisonPage, { heading: "Subscription Plans", isAuthenticated: true, currentPlanId: "starter", currentPlanVersionId: "starter-v1", currentEntitlementState: "active", canManageCurrentPlan: false, onBack: () => { }, backLabel: "Back", onSelectPlan: onSelectPlan }));
+        render(_jsx(PlanComparisonPage, { heading: "Subscription Plans", isAuthenticated: true, currentPlanId: "free", currentPlanVersionId: "free-v1", currentEntitlementState: "active", canManageCurrentPlan: false, onBack: () => { }, backLabel: "Back", onSelectPlan: onSelectPlan }));
         await screen.findByRole('heading', { name: 'Subscription Plans' });
         const currentButton = screen.getByRole('button', { name: 'Current Plan' });
         expect(currentButton).toBeDisabled();
@@ -139,11 +387,11 @@ describe('PlanComparisonPage', () => {
                 },
                 plans: [
                     {
-                        planId: 'starter',
-                        displayName: 'Starter',
+                        planId: 'free',
+                        displayName: 'Free',
                         status: 'active',
                         defaultVersion: {
-                            planVersionId: 'starter-v1',
+                            planVersionId: 'free-v1',
                             versionNumber: 1,
                             seatLimit: null,
                             metadata: {}
@@ -159,7 +407,7 @@ describe('PlanComparisonPage', () => {
         });
         vi.stubGlobal('fetch', fetchMock);
         render(_jsx(PlanComparisonPage, { heading: "Subscription Plans", isAuthenticated: false, pricingEndpoint: "https://performance-app.example/api/taskforce/public/pricing", onBack: () => { }, backLabel: "Back", onSelectPlan: () => { } }));
-        expect(await screen.findByRole('heading', { name: 'Starter' })).toBeInTheDocument();
+        expect(await screen.findByRole('heading', { name: 'Free' })).toBeInTheDocument();
         expect(fetchMock).toHaveBeenCalledTimes(1);
         expect(fetchMock).toHaveBeenCalledWith('https://performance-app.example/api/taskforce/public/pricing', {
             method: 'GET',
@@ -177,27 +425,27 @@ describe('PlanComparisonPage', () => {
                 },
                 plans: [
                     {
-                        planId: 'enterprise',
-                        displayName: 'Enterprise',
+                        planId: 'team-5',
+                        displayName: 'Team 5',
                         status: 'active',
                         defaultVersion: {
-                            planVersionId: 'enterprise-v3',
+                            planVersionId: 'team-5-v2',
                             versionNumber: 3,
-                            seatLimit: 100,
+                            seatLimit: 5,
                             metadata: {}
                         },
                         features: [],
                         pricing: {
-                            month: { pricingType: 'stripe', stripePriceId: 'price_enterprise_month', unitAmount: 12000, currency: 'usd', interval: 'month' },
-                            year: { pricingType: 'stripe', stripePriceId: 'price_enterprise_year', unitAmount: 120000, currency: 'usd', interval: 'year' }
+                            month: { pricingType: 'stripe', stripePriceId: 'price_team_5_month', unitAmount: 12000, currency: 'usd', interval: 'month' },
+                            year: { pricingType: 'stripe', stripePriceId: 'price_team_5_year', unitAmount: 120000, currency: 'usd', interval: 'year' }
                         }
                     },
                     {
-                        planId: 'starter',
-                        displayName: 'Starter',
+                        planId: 'free',
+                        displayName: 'Free',
                         status: 'active',
                         defaultVersion: {
-                            planVersionId: 'starter-v1',
+                            planVersionId: 'free-v1',
                             versionNumber: 1,
                             seatLimit: null,
                             metadata: {}
@@ -209,19 +457,19 @@ describe('PlanComparisonPage', () => {
                         }
                     },
                     {
-                        planId: 'pro',
-                        displayName: 'Pro',
+                        planId: 'basic',
+                        displayName: 'Basic',
                         status: 'active',
                         defaultVersion: {
-                            planVersionId: 'pro-v2',
+                            planVersionId: 'basic-v1',
                             versionNumber: 2,
-                            seatLimit: 10,
+                            seatLimit: 1,
                             metadata: {}
                         },
                         features: [],
                         pricing: {
-                            month: { pricingType: 'stripe', stripePriceId: 'price_pro_month', unitAmount: 3000, currency: 'usd', interval: 'month' },
-                            year: { pricingType: 'stripe', stripePriceId: 'price_pro_year', unitAmount: 30000, currency: 'usd', interval: 'year' }
+                            month: { pricingType: 'stripe', stripePriceId: 'price_basic_month', unitAmount: 3000, currency: 'usd', interval: 'month' },
+                            year: { pricingType: 'stripe', stripePriceId: 'price_basic_year', unitAmount: 30000, currency: 'usd', interval: 'year' }
                         }
                     }
                 ]
@@ -231,7 +479,7 @@ describe('PlanComparisonPage', () => {
         render(_jsx(PlanComparisonPage, { heading: "Subscription Plans", isAuthenticated: false, onBack: () => { }, backLabel: "Back", onSelectPlan: () => { } }));
         await screen.findByRole('heading', { name: 'Subscription Plans' });
         const planNames = screen.getAllByRole('heading', { level: 3 }).map((node) => node.textContent);
-        expect(planNames).toEqual(['Starter', 'Pro', 'Enterprise']);
+        expect(planNames).toEqual(['Free', 'Basic', 'Team 5']);
     });
     it('defaults to the same-origin pricing endpoint', async () => {
         const fetchMock = vi.fn().mockResolvedValue({