feat(frontend): improve plans page UX for credits-only orgs#1629
Conversation
- Replace misleading 'Don't want to upgrade?' CTA with info banner for orgs using credits without a subscription plan - Remove blue border highlight on Solo plan for credits-only orgs - Use information icon instead of currency icon for credits-only banner - Add new translation keys in all 15 languages via DeepL
ScreenshotsBefore (production — credits-only org on Plans page)
After (feature branch — credits-only org on Plans page)
Key changes visible
|
📝 WalkthroughWalkthroughAdds localized strings for a "credits-only" UI state across multiple languages, introduces a Changes
Sequence Diagram(s)sequenceDiagram
participant Plans as Plans.vue
participant CreditsCta as CreditsCta.vue
participant Router as Router/goToCredits
participant User as User
Plans->>CreditsCta: pass prop credits-only = isCreditsOnly
CreditsCta-->>Plans: render banner if credits-only true
User->>CreditsCta: clicks banner link
CreditsCta->>Router: goToCredits()
Router-->>User: navigate to Credits page
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches🧪 Generate unit tests (beta)
No actionable comments were generated in the recent review. 🎉 🧹 Recent nitpick comments
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/CreditsCta.vue (1)
29-88:⚠️ Potential issue | 🟠 MajorMake the banner a real interactive element (DaisyUI + keyboard support).
The clickable
<div>isn’t keyboard-accessible and doesn’t use DaisyUI components. Consider switching to a<button>(or<router-link>) styled as ad-cardso it’s semantic, accessible, and guideline-compliant.♿ Suggested adjustment
- <div + <button v-if="props.creditsOnly" - class="flex items-center w-full p-4 transition-all duration-200 border cursor-pointer bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800 hover:border-blue-300 dark:hover:border-blue-700 rounded-xl group" + type="button" + class="d-card flex items-center w-full p-4 transition-all duration-200 border cursor-pointer bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800 hover:border-blue-300 dark:hover:border-blue-700 rounded-xl group" `@click`="goToCredits" > @@ - </div> + </button> @@ - <div + <button v-else - class="flex items-center w-full p-4 transition-all duration-200 border cursor-pointer bg-gray-50 dark:bg-gray-900 border-gray-200 dark:border-gray-700 hover:border-blue-300 dark:hover:border-blue-700 rounded-xl group" + type="button" + class="d-card flex items-center w-full p-4 transition-all duration-200 border cursor-pointer bg-gray-50 dark:bg-gray-900 border-gray-200 dark:border-gray-700 hover:border-blue-300 dark:hover:border-blue-700 rounded-xl group" `@click`="goToCredits" > @@ - </div> + </button>As per coding guidelines, "Use DaisyUI components (
d-btn,d-input,d-card) for interactive elements in Vue components".
🤖 Fix all issues with AI agents
In `@messages/id.json`:
- Around line 496-498: The link label for the key "credits-only-info-link" uses
"pulsa" which is inconsistent with the file's "kredit" terminology; update the
string value for "credits-only-info-link" to replace "pulsa" with "kredit" so it
reads "Kelola penggunaan kredit Anda" to match the other keys
("credits-only-info-title", "credits-only-info-description").
In `@messages/it.json`:
- Around line 496-498: Update the three i18n keys to use informal singular and
an imperative CTA: change "credits-only-info-description" to a singular informal
phrase (e.g., "Non sei abbonato a nessun piano."), change
"credits-only-info-title" to a more natural singular-tone title (e.g., "Uso dei
crediti invece di un piano"), and change "credits-only-info-link" to an
imperative CTA (e.g., "Gestisci il credito") so the tone matches the rest of the
file; apply these replacements to the values of the keys
"credits-only-info-description", "credits-only-info-title", and
"credits-only-info-link".
In `@messages/ru.json`:
- Around line 496-498: The link string "credits-only-info-link" currently uses
singular "кредита"; update its value to use the plural form "кредитов" to match
other keys (e.g., "credits-only-info-description" and "credits-only-info-title")
— find the "credits-only-info-link" entry and replace "Управляйте использованием
кредита" with "Управляйте использованием кредитов".
In `@messages/zh-cn.json`:
- Around line 496-498: The link text for the "credits-only-info-link" key uses
“信贷” while other keys like "credits-only-info-description" and
"credits-only-info-title" use “积分”; update the value of "credits-only-info-link"
to use “积分” (e.g., change "管理您的信贷使用情况" to "管理您的积分使用情况") so terminology is
consistent across the file.
🧹 Nitpick comments (1)
messages/pl.json (1)
496-498: New Polish translation keys look good.The three new
credits-only-info-*keys are properly placed and the translations are accurate Polish. Minor stylistic note:credits-only-info-linkuses the noun form "Zarządzanie wykorzystaniem kredytu" whereas other CTA links in this file (e.g.,credits-flexibility-cta-link: "Dowiedz się więcej...") use imperative mood. Consider "Zarządzaj wykorzystaniem kredytu" for consistency, but this is not blocking.
- Fix Indonesian: use 'kredit' instead of 'pulsa' for terminology consistency - Fix Italian: use informal singular and imperative CTA form - Fix Russian: use plural 'кредитов' for consistency - Fix Chinese: use '积分' instead of '信贷' for consistency - Fix Polish: use imperative mood for CTA link - Improve accessibility: use <button> instead of <div> for clickable banners
2 participants
Summary (AI generated)
heroicons/information-circle) instead of the currency dollar icon for the new bannercredits-only-info-title,credits-only-info-description,credits-only-info-link) in all 15 languages via DeepL API (Hindi translated manually)Motivation (AI generated)
Credits-only organizations (orgs that purchased credits but have no active Stripe subscription) were seeing a confusing Plans page:
This created a misleading UX that contradicted the user's actual state. The fix replaces the upsell CTA with a clear informational banner and removes the false plan highlight.
Business Impact (AI generated)
Test Plan (AI generated)
/settings/organization/creditsScreenshots
(Will be added as a comment — GitHub CLI does not support inline image upload in PR body)
Generated with AI
Summary by CodeRabbit