fix(Rewards): Move company name in Benefits cards

[Montoya]

Description

Company name in Benefits cards was displayed on the same line as the title, overlapping and severely truncating the titles. This moves it to the bottom of the card alongside the time left. It also addresses other issues related to Benefits cards. Full list of changes:

• Move the benefit company name from the title row to the footer row alongside the remaining-time countdown.
• Keep the company name right-aligned when no countdown is available.
• Use validTo as the preferred countdown date, falling back to actionDate.
• Treat empty or malformed dates as unavailable and try the fallback date.
• Allow both validTo and actionDate to be nullable.
• Apply the countdown logic consistently to benefit cards and the full benefit view.
• Update benefit card typography and clock sizing for the compact layout.
• Add stable footer test identifiers and replace the fragile React instance comparison.
• Add tests covering date priority, fallback behavior, malformed dates, missing dates, and company placement.

Testing

• yarn jest app/components/UI/Rewards/utils/formatUtils.test.ts app/components/UI/Rewards/components/Benefits/BenefitCard.test.tsx app/components/UI/Rewards/Views/BenefitFullView.test.tsx --runInBand
• yarn lint:tsc
• ESLint on all modified files
• git diff --check

Changelog

CHANGELOG entry: Improved the readability of Benefits cards in Rewards

Related issues

Fixes: n/a

Manual testing steps

Feature: Benefits card company name

  Scenario: user has mobile app
    Given user navigates to the Rewards tab

    When user views a Benefit card in the Benefits list
    Then time remaining is display cleanly at the bottom of the card

Note: it isn't possible to see company names right now because they had to be disabled at the API level.

Screenshots/Recordings

Before

n/a

After

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
Rewards benefits UI and display-only date selection; changes are localized with new unit tests and no auth or payment impact.

Overview
Rewards benefit list cards no longer show the partner company name on the same row as the title (which was truncating titles). The name now sits in a footer row with the clock and time remaining, using a new BENEFIT_CARD_FOOTER test id and slightly smaller typography for description and footer text.

Time left on cards and the benefit detail screen now comes from a shared resolveBenefitEndDate helper: it uses validTo when present and parseable, otherwise actionDate. SubscriptionBenefitDto.validTo is typed as string | null to match nullable API data. Unit and component tests cover the date resolution and layout.

^{Reviewed by Cursor Bugbot for commit 3ee721e. 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.

[metamask-ci]

PR template — items to address before "Ready for review"

Warnings — informational, address before merging:

• Pre-merge author checklist has unchecked items (e.g. "I've tested on Android"). Every box must be consciously checked — see docs/readme/ready-for-review.md.

See docs/readme/ready-for-review.md for the full Definition of Ready for Review.

[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: 92%

click to see 🤖 AI reasoning details

E2E Test Selection:
The PR changes are entirely scoped to the Rewards/Benefits UI feature:

1. types.ts (critical file): Minor type widening - validTo: string → validTo: string | null in SubscriptionBenefitDto. This is a non-breaking change that allows null values. No controller logic, state management, or Engine initialization is affected.

2. formatUtils.ts: New resolveBenefitEndDate utility function that picks the first valid date from validTo or actionDate. Pure utility logic with no side effects on other systems.

3. BenefitCard.tsx / BenefitFullView.tsx: UI layout refactoring - uses new date resolution logic, text variant changes (BodyMd → BodySm), layout restructuring (company name moved to footer row). These are cosmetic/layout changes within the Rewards feature.

4. RewardsView.constants.ts: Added a new test selector constant BENEFIT_CARD_FOOTER.

5. Test files: Unit tests for the changed components/utilities.

No E2E smoke tests exist for the Rewards/Benefits feature - confirmed by searching the tests/smoke* directories. The changes do not affect any shared components (TabBar, navigation, modals, confirmations, browser), core wallet flows (accounts, swaps, staking, network management), or any other area covered by the available smoke tags. The critical file flag on types.ts is due to the path pattern, but the actual change is a trivial type widening with no architectural impact.

Performance Test Selection:
The changes are limited to Rewards/Benefits UI components (layout, text variants, date resolution logic) and a minor type widening in the SubscriptionBenefitDto type. None of these changes affect performance-sensitive flows like app launch, login, onboarding, asset loading, swaps, account list rendering, or trading features. No performance test tags are warranted.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud