✨ refactor(wallet): Top-up layout to embed subscription plans into the recharge card tabs#2878
Merged
Merged
Conversation
…e recharge card tabs - Defaulting to subscriptions when available and avoiding initial flash when no plans exist. - Adjust the wide-screen layout to place wallet and invite sections side by side, simplify the subscription header and controls, and add padding to prevent card borders from clipping. - Update related i18n strings by adding the new tab label and removing the obsolete subscription blurb.
Contributor
WalkthroughThe PR restructures the TopUp component by integrating SubscriptionPlansCard as a tabbed interface within RechargeCard, consolidating subscription management logic into the recharge card, simplifying the parent layout from 12-column to 2-column grid, and renaming translation keys across 6 locale files to reflect "quota top-up" terminology. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
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}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@web/src/components/topup/SubscriptionPlansCard.jsx`:
- Around line 320-345: The header controls in SubscriptionPlansCard (the Select
with value billingPreference and the icon-only Button using RefreshCw) lack
accessible names; add aria-label (or aria-labelledby) props to the Select (e.g.,
aria-label={t('billing preference')} or link it to a visible label) and to the
refresh Button (e.g., aria-label={t('刷新/刷新列表' or t('refresh')}) so screen
readers can announce them; ensure the Button keeps its icon-only UI but includes
the aria-label and consider adding a title prop or Tooltip for visual hinting
while using the existing refreshing state and handleRefresh handler.
Comment on lines
+320
to
+345
| <div className='flex items-center gap-2'> | ||
| <Select | ||
| value={billingPreference} | ||
| onChange={onChangeBillingPreference} | ||
| size='small' | ||
| optionList={[ | ||
| { value: 'subscription_first', label: t('优先订阅') }, | ||
| { value: 'wallet_first', label: t('优先钱包') }, | ||
| { value: 'subscription_only', label: t('仅用订阅') }, | ||
| { value: 'wallet_only', label: t('仅用钱包') }, | ||
| ]} | ||
| /> | ||
| <Button | ||
| size='small' | ||
| theme='light' | ||
| type='tertiary' | ||
| icon={ | ||
| <RefreshCw | ||
| size={12} | ||
| className={refreshing ? 'animate-spin' : ''} | ||
| /> | ||
| } | ||
| onClick={handleRefresh} | ||
| loading={refreshing} | ||
| /> | ||
| </div> |
Contributor
There was a problem hiding this comment.
Add accessible labels to header controls. The billing preference Select and icon-only refresh Button should expose an accessible name for screen readers.
🔧 Suggested fix
- <Select
+ <Select
+ aria-label={t('计费偏好')}
value={billingPreference}
onChange={onChangeBillingPreference}
size='small'
optionList={[
{ value: 'subscription_first', label: t('优先订阅') },
{ value: 'wallet_first', label: t('优先钱包') },
{ value: 'subscription_only', label: t('仅用订阅') },
{ value: 'wallet_only', label: t('仅用钱包') },
]}
/>
<Button
size='small'
theme='light'
type='tertiary'
+ aria-label={t('刷新')}
icon={
<RefreshCw
size={12}
className={refreshing ? 'animate-spin' : ''}
/>
}🤖 Prompt for AI Agents
In `@web/src/components/topup/SubscriptionPlansCard.jsx` around lines 320 - 345,
The header controls in SubscriptionPlansCard (the Select with value
billingPreference and the icon-only Button using RefreshCw) lack accessible
names; add aria-label (or aria-labelledby) props to the Select (e.g.,
aria-label={t('billing preference')} or link it to a visible label) and to the
refresh Button (e.g., aria-label={t('刷新/刷新列表' or t('refresh')}) so screen
readers can announce them; ensure the Button keeps its icon-only UI but includes
the aria-label and consider adding a title prop or Tooltip for visual hinting
while using the existing refreshing state and handleRefresh handler.
This was referenced Feb 13, 2026
6 tasks
This was referenced Mar 6, 2026
7 tasks
ennnnny
pushed a commit
to ennnnny/new-api
that referenced
this pull request
Mar 17, 2026
…iption-card-when-no-plans ✨ refactor(wallet): Top-up layout to embed subscription plans into the recharge card tabs
This was referenced Mar 18, 2026
Closed
Closed
This was referenced Mar 26, 2026
Closed
This was referenced Apr 6, 2026
Merged
This was referenced Apr 13, 2026
This was referenced May 3, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
New Features
UI/UX Improvements
Localization