chore(runway): cherry-pick feat(rewards): benefits preview uses Tag for available count cp-7.78.0

[runway-github]

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

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.}

[f8f126d](https://github.com/MetaMask/metamask-mobile/commit/f8f126ddc6204a7a03fb7e4660f063dc2aa0d4eb)

[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.

[github-actions]

🔍 Smart E2E Test Selection

⏭️ Smart E2E selection skipped - PR targets a release branch (release/*)

All E2E tests pre-selected.

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

[chloeYue]

LGTM