fix(frontend): clarify expired trial plans state - #2927
Conversation
…lans-state # Conflicts: # messages/en.json # src/services/paymentRequired.ts # tests/payment-required-copy.unit.test.ts
GitHub Actions
Inactive
📝 WalkthroughWalkthroughAdds shared billing-history lookup state and expired-trial predicates. Updates the plans page and payment-required modal to use this state. Adds expired-trial copy, plan actions, neutral card styling, failure-banner handling, and focused tests. ChangesExpired trial plans
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant Organization
participant PlansPage
participant useBillingPaidAt
participant Supabase
Organization->>PlansPage: select organization
PlansPage->>useBillingPaidAt: provide organization GID
useBillingPaidAt->>Supabase: request stripe_info(paid_at)
Supabase-->>useBillingPaidAt: paidAt or lookup failure
useBillingPaidAt-->>PlansPage: update billing state
PlansPage->>Organization: render expired-trial plans state
Possibly related PRs
Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
Comment |
Merging this PR will not alter performance
Comparing 
Footnotes
|
GitHub Actions
Inactive
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
Review completed against the latest diff
Reply with feedback, questions, or to request a fix.
Re-trigger cubic
GitHub Actions
Inactive
GitHub Actions
Inactive
|
Addressed all four Cubic findings in c542524: the red banner is suppressed while billing history is unresolved, lookup failures are logged and retain the existing failure fallback, Plans now uses resolveBillingPaidAt, and Credits/Expert CTAs render once with state-dependent ordering. Added banner-state coverage; lint, frontend typecheck, 200 unit files / 1,446 tests, and production build pass locally. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
|
@cubic-dev-ai review this PR |
@WcaleNieWolny I have started the AI code review. It will take a few minutes to complete. |
There was a problem hiding this comment.
1 issue found across 8 files
Confidence score: 5/5
- In
src/pages/settings/organization/Plans.vue, the new billing-history watcher duplicates the Supabase fetch andbillingLookupRunstale-response guard, which raises maintenance risk: future fixes could land in one path but not the other and cause inconsistent billing timestamps or race-handling behavior — extract this logic into a shared helper/composable and call it from both watchers.
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="src/pages/settings/organization/Plans.vue">
<violation number="1" location="src/pages/settings/organization/Plans.vue:68">
P3: This new billing-history watcher duplicates the exact Supabase query and stale-response guard (`.from('orgs').select('stripe_info(paid_at)').eq('id', orgId).maybeSingle()` plus the `billingLookupRun` token) that already exists inline in `src/components/PaymentRequiredModal.vue` (lines ~21-38). The PR adds a second copy of the same lookup rather than sharing it, so any future change to the query (e.g., RLS shape, added fields, or the never-paid/missing-relation semantics) has to be applied in two places and can drift. Consider extracting the lookup into a small shared helper (or composable) alongside the pure predicates in `src/services/paymentRequired.ts`, which is exactly what the implementation plan describes as "shared billing-history predicates used by dashboard and plans-page presentation."</violation>
</file>
Reply with feedback, questions, or to request a fix.
Re-trigger cubic
GitHub Actions
Inactive
|
Addressed both follow-up Cubic findings in c046ffd: the implementation plan now defines every referenced predicate and the shared composable workflow, and PaymentRequiredModal plus Plans now consume one useBillingPaidAt implementation for the Supabase query, lookup-error state, and stale-response guard. Local lint, frontend typecheck, 200 unit files / 1,446 tests, and production build pass. |
GitHub Actions
Inactive
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@tests/cli-app-permission-helper.test.ts`:
- Line 6: Remove the earlier duplicate appAddHintMessage property from the test
fixture, keeping the later definition that intentionally overwrites it so Biome
no longer reports a duplicate key.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 94d0e6b4-b345-44b1-bd66-cee9d5a6b367
📒 Files selected for processing (10)
docs/superpowers/plans/2026-08-07-expired-trial-plans-state.mddocs/superpowers/specs/2026-08-07-expired-trial-plans-state-design.mdmessages/en.jsonsrc/auto-imports.d.tssrc/components/PaymentRequiredModal.vuesrc/composables/useBillingPaidAt.tssrc/pages/settings/organization/Plans.vuesrc/services/paymentRequired.tstests/cli-app-permission-helper.test.tstests/payment-required-copy.unit.test.ts
🔗 Linked repositories identified
CodeRabbit considers these linked repositories for cross-repo context during reviews:
Cap-go/capacitor-updater(manual)
GitHub Actions
Inactive
|
Addressed the post-merge CodeRabbit finding in 5b34c65 by removing the earlier duplicate appAddHintMessage mock and retaining main’s complete hint implementation. The focused CLI permission-helper test passes (2/2), and the repository lint/typecheck/unit gates had passed on the merged head. |
Unpaid organizations that land on a gated app page (devices, bundles, channels, builds, notifications) saw a blurred empty table behind the payment modal, with no page-level reason and no visible route to the plans page. Add a shared UnpaidState empty state that explains why the list is hidden and links to the plans page, and stop the layout overlay from covering those pages so the explanation is visible. The block itself is unchanged: the pages still render no data when the organization has no active subscription. The payment-modal copy flip is handled separately by PR #2927 and is left untouched. Generated-By: PostHog Code Task-Id: 21fb1bad-b78a-4701-803d-0571de027a1f
GitHub Actions
Inactive
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@tests/plans-expired-trial-layout.unit.test.ts`:
- Around line 7-10: Update the test case “keeps the credits and premium support
banners ahead of the plans” to assert ordering directly: verify the <CreditsCta>
and expert-support content appear before the “<!-- Plans Grid -->” marker in
plansSource. Keep or replace the existing class-removal assertions as
appropriate, but ensure the test fails if the plans grid precedes either CTA.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: cdeedd1d-29a4-4753-94b1-8093d8b20ad2
📒 Files selected for processing (2)
src/pages/settings/organization/Plans.vuetests/plans-expired-trial-layout.unit.test.ts
🔗 Linked repositories identified
CodeRabbit considers these linked repositories for cross-repo context during reviews:
Cap-go/capacitor-updater(manual)
GitHub Actions
Inactive
…lans-state # Conflicts: # src/pages/settings/organization/Plans.vue
GitHub Actions
Inactive
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/pages/settings/organization/Plans.vue (1)
638-662: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winKeep CTA placement state-dependent.
CreditsCtaand the expert-support CTA now appear after the plans grid for every billing state. This changes the existing layout for previously paid, canceled, and ended subscriptions, although the PR requires their CTA order and behavior to remain unchanged.Restore the
showExpiredTrialState-dependent ordering, or use a state-specific wrapper, so only expired-trial pages place these CTAs below the plans. Add a regression test for a non-expired state.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/pages/settings/organization/Plans.vue` around lines 638 - 662, Update the CTA layout around CreditsCta and the Expert as a Service block to preserve the existing showExpiredTrialState-dependent ordering: render them below the plans only for expired-trial pages, while keeping the established placement and behavior for paid, canceled, and ended subscriptions. Use the existing state-specific wrapper or condition, and add a regression test covering a non-expired state.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@src/pages/settings/organization/Plans.vue`:
- Around line 638-662: Update the CTA layout around CreditsCta and the Expert as
a Service block to preserve the existing showExpiredTrialState-dependent
ordering: render them below the plans only for expired-trial pages, while
keeping the established placement and behavior for paid, canceled, and ended
subscriptions. Use the existing state-specific wrapper or condition, and add a
regression test covering a non-expired state.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 894235af-d0a0-4bd8-ab49-4e85014aee9e
📒 Files selected for processing (3)
messages/en.jsonsrc/pages/settings/organization/Plans.vuetests/plans-expired-trial-layout.unit.test.ts
🔗 Linked repositories identified
CodeRabbit considers these linked repositories for cross-repo context during reviews:
Cap-go/capacitor-updater(manual)
|
1 participant
Summary
Test Plan
Summary by CodeRabbit
New Features
Bug Fixes