feat(rewards): benefits preview uses Tag for available count cp-7.78.0

[andrewjcohen]

Description

Section header spacing alignment: CampaignsPreview.tsx — the campaigns preview header row now uses gap-1 instead of gap-2 between the title row items (spinner when shown, heading, chevron), matching the Benefits preview header spacing on the Rewards dashboard.

The Rewards dashboard Benefits preview header previously used a numeric BadgeCount beside the section title. This change replaces it with a design-system Tag (TagSeverity.Neutral) that shows how many benefits are available using the localized string rewards.benefits.available_count (e.g. %{count} available in English). Counts above 99 display as 99+.

The header row is full width with justifyContent: space-between: the title and chevron stay on the leading side; the tag sits on the trailing edge so it matches the intended layout. Spacing uses gap-1 between the title and chevron. The empty-state header no longer renders a redundant null badge slot.

Motivation: Align with design (muted pill copy and alignment) and keep copy in i18n for the translation pipeline (English source string only in en.json).

Automated tests: yarn jest app/components/UI/Rewards/components/Benefits/BenefitsPreview.test.tsx

Changelog

CHANGELOG entry: Updated the Rewards benefits preview header to show how many benefits are available using a tag label next to the section title; aligned campaigns preview section header spacing with the benefits preview (gap-1).

Related issues

Fixes:

Manual testing steps

Feature: Rewards benefits preview header

  Scenario: User sees benefits count when they have benefits
    Given the user is opted into Rewards and the benefits API returns at least one benefit

    When user opens the Rewards dashboard (home) and scrolls to the Benefits preview
    Then a neutral tag shows the correct count and available wording for the current locale
    And the tag is aligned to the far right of the header row with the title and chevron grouped on the left
    And tapping the header row still navigates to the full benefits view

  Scenario: User has no benefits
    Given the user has no benefits in the list

    When user opens the Rewards dashboard and views the Benefits preview
    Then the count tag is not shown and the empty state behaves as before

  Feature: Rewards campaigns preview header spacing

  Scenario: User compares section headers on Rewards home
    Given the user is on the Rewards dashboard home tab

    When user views the Campaigns preview section header
    Then the title row uses gap-1 between the title row elements, matching the Benefits preview header spacing

Screenshots/Recordings

Before

Numeric badge style (BadgeCount) adjacent to the Benefits title (previous implementation).

After

Neutral Tag with “{count} available” (per locale), title + chevron on the left, tag aligned to the trailing edge. (Screenshot also attached in an earlier PR update.)

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• I've completed the PR template to the best of my ability
• I've included tests if applicable
• I've documented my code using JSDoc format if applicable
• I've applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Performance checks (if applicable)

• I've tested on Android
  • Ideally on a mid-range device; emulator is acceptable
• I've tested with a power user scenario
  • Use these power-user SRPs to import wallets with many accounts and tokens
• I've instrumented key operations with Sentry traces for production performance metrics
  • See trace() for usage and addToken for an example

For performance guidelines and tooling, see the Performance Guide.

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

---

Note

Low Risk
Low risk UI/i18n change with unit test updates; primary risk is minor layout/regression in rewards preview headers and count formatting around the 99/99+ boundary.

Overview
The Benefits preview header now replaces the numeric BadgeCount with a neutral design-system Tag that shows a localized rewards.benefits.available_count label (capped to 99+), and adjusts header layout to keep the title+chevron grouped left with the tag right-aligned.

Campaigns preview header spacing is tightened (gap-1), and tests were expanded to cover the new benefits count behavior (including empty state and 99/99+ cases) plus treating undefined campaigns as an empty list. Adds the new English i18n key rewards.benefits.available_count.

^{Reviewed by Cursor Bugbot for commit 5ece706. Bugbot is set up for automated code reviews on this repo. Configure here.}

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit e3de347. Configure here.}

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: None (no tests recommended)
• Selected Performance tags: None (no tests recommended)
• Risk Level: low
• AI Confidence: 95%

click to see 🤖 AI reasoning details

E2E Test Selection:
The changes are limited to UI cosmetic updates within the Rewards feature components:

1. BenefitsPreview.tsx: Replaced BadgeCount with a Tag component for displaying benefits count, added an arrow icon to the header, adjusted layout spacing (gap-2 → gap-1), and used a new localization string.
2. CampaignsPreview.tsx: Minor spacing adjustment (gap-2 → gap-1).
3. locales/languages/en.json: Added a new additive string "available_count": "{{count}} available" under rewards.benefits — no existing strings were modified.
4. Test files: Unit test updates corresponding to the component changes.

No E2E tests exist for the Rewards feature (confirmed by searching e2e test files). These changes do not affect any shared components (navigation, modals, confirmations, browser), controllers, or critical user flows covered by the available E2E test tags. The risk is low and no E2E tags are warranted.

Performance Test Selection:
The changes are purely cosmetic UI adjustments (component swap, spacing tweaks) within the Rewards feature. No performance-sensitive code paths, list rendering, data loading, state management, or critical user flows are affected.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
100.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud