feat(rewards): benefits preview uses Tag for available count (#30196)

<!--
Please submit this PR as a draft initially.

Do not mark it as "Ready for review" until this PR meets the canonical
Definition of Ready For Review in `docs/readme/ready-for-review.md`.

In short: the template must be materially complete (not just section
titles
present), all status checks must be currently passing, and the only
expected
follow-up commits must be reviewer-driven.
-->

## **Description**

> **Section header spacing alignment:**
[`CampaignsPreview.tsx`](app/components/UI/Rewards/components/Campaigns/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**

```gherkin
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**

<img width="413" height="827" alt="image"
src="https://github.com/user-attachments/assets/bd00ee97-2ae3-4ccb-b924-51ba6d0ca677"
/>

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**

<!--
Every checklist item must be consciously assessed before marking this PR
as
"Ready for review". A checked box means you deliberately considered that
responsibility, not that you literally performed every action listed.

Unchecked boxes are ambiguous: they are not an implicit "N/A" and they
are not
a silent "skip". See `docs/readme/ready-for-review.md` for the full
checklist
semantics.
-->

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
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](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/edit-v2/401401446401?draftShareId=9d77e1e1-4bdc-4be1-9ebb-ccd916988d93)
to import wallets with many accounts and tokens
- [ ] I've instrumented key operations with Sentry traces for production
performance metrics
- See [`trace()`](/app/util/trace.ts) for usage and
[`addToken`](/app/components/Views/AddAsset/components/AddCustomToken/AddCustomToken.tsx#L274)
for an example

For performance guidelines and tooling, see the [Performance
Guide](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/400085549067/Performance+Guide+for+Engineers).

## **Pre-merge reviewer checklist**

<!--
Reviewer checklist items follow the same semantics as the author
checklist: an
unchecked box is ambiguous, a checked box means the reviewer consciously
assessed that responsibility. See `docs/readme/ready-for-review.md`.
-->

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


<!-- CURSOR_SUMMARY -->
---

> [!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`.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
5ece706. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: andrewjcohen

app/components/UI/Rewards/components/Benefits/BenefitsPreview.test.tsx

@@ -12,7 +12,14 @@ const mockNavigate = jest.fn();
 const mockUseSelector = jest.fn();
 const mockUseBenefits = jest.fn();
 
-const mockStrings = jest.fn((key: string) => {
+const mockStrings = jest.fn((key: string, params?: Record<string, unknown>) => {
+  if (
+    key === 'rewards.benefits.available_count' &&
+    params &&
+    typeof params.count === 'string'
+  ) {
+    return `${params.count} available`;
+  }
   const translations: Record<string, string> = {
     'rewards.benefits.title': 'Benefits',
     'rewards.benefits.empty-list': 'No benefits available yet',
@@ -42,7 +49,8 @@ jest.mock('../../hooks/useBenefits', () => ({
 }));
 
 jest.mock('../../../../../../locales/i18n', () => ({
-  strings: (key: string) => mockStrings(key),
+  strings: (key: string, params?: Record<string, unknown>) =>
+    mockStrings(key, params),
 }));
 
 jest.mock('@metamask/design-system-twrnc-preset', () => {
@@ -126,7 +134,10 @@ describe('BenefitsPreview', () => {
   it('requests rewards benefits title copy from i18n', () => {
     render(<BenefitsPreview />);
 
-    expect(mockStrings).toHaveBeenCalledWith('rewards.benefits.title');
+    expect(mockStrings).toHaveBeenCalledWith(
+      'rewards.benefits.title',
+      undefined,
+    );
   });
 
   it('reads subscription benefits and loading state from the store', () => {
@@ -169,7 +180,20 @@ describe('BenefitsPreview', () => {
 
       expect(getByTestId('benefit-empty-list')).toBeOnTheScreen();
       expect(getByText('No benefits available yet')).toBeOnTheScreen();
-      expect(mockStrings).toHaveBeenCalledWith('rewards.benefits.empty-list');
+      expect(mockStrings).toHaveBeenCalledWith(
+        'rewards.benefits.empty-list',
+        undefined,
+      );
+    });
+
+    it('does not request available_count copy when there are no benefits', () => {
+      render(<BenefitsPreview />);
+
+      const availableCountCalls = mockStrings.mock.calls.filter(
+        (call) => call[0] === 'rewards.benefits.available_count',
+      );
+
+      expect(availableCountCalls).toHaveLength(0);
     });
 
     it('does not render benefit details container without benefits', () => {
@@ -225,6 +249,70 @@ describe('BenefitsPreview', () => {
         Routes.REWARD_BENEFITS_FULL_VIEW,
       );
     });
+
+    it('shows available benefits count in the header tag', () => {
+      const { getByText } = render(<BenefitsPreview />);
+
+      expect(getByText('2 available')).toBeOnTheScreen();
+      expect(mockStrings).toHaveBeenCalledWith(
+        'rewards.benefits.available_count',
+        {
+          count: '2',
+        },
+      );
+    });
+
+    it('caps displayed benefits count at 99+ in the header tag', () => {
+      mockBenefits = Array.from({ length: 100 }, (_, index) => ({
+        id: index + 1,
+        longTitle: `Benefit ${index + 1}`,
+        shortDescription: 'd',
+      }));
+
+      const { getByText } = render(<BenefitsPreview />);
+
+      expect(getByText('99+ available')).toBeOnTheScreen();
+      expect(mockStrings).toHaveBeenCalledWith(
+        'rewards.benefits.available_count',
+        {
+          count: '99+',
+        },
+      );
+    });
+
+    it('displays numeric count 99 in the header tag when there are exactly 99 benefits', () => {
+      mockBenefits = Array.from({ length: 99 }, (_, index) => ({
+        id: index + 1,
+        longTitle: `Benefit ${index + 1}`,
+        shortDescription: 'd',
+      }));
+
+      const { getByText } = render(<BenefitsPreview />);
+
+      expect(getByText('99 available')).toBeOnTheScreen();
+      expect(mockStrings).toHaveBeenCalledWith(
+        'rewards.benefits.available_count',
+        {
+          count: '99',
+        },
+      );
+    });
+
+    it('renders a single benefit card when the list has one item', () => {
+      mockBenefits = [
+        { id: 42, longTitle: 'Solo benefit', shortDescription: 'only one' },
+      ];
+
+      const { getByTestId, getByText, queryByTestId } = render(
+        <BenefitsPreview />,
+      );
+
+      expect(
+        getByTestId(REWARDS_VIEW_SELECTORS.TOP_BENEFIT_DETAILS),
+      ).toBeOnTheScreen();
+      expect(getByText('Solo benefit')).toBeOnTheScreen();
+      expect(queryByTestId('benefit-card-2')).toBeNull();
+    });
   });
 
   describe('header without benefits', () => {

app/components/UI/Rewards/components/Benefits/BenefitsPreview.tsx

@@ -1,14 +1,15 @@
 import {
-  BadgeCount,
-  BadgeCountSize,
   Box,
   BoxAlignItems,
-  BoxBackgroundColor,
   BoxFlexDirection,
+  BoxJustifyContent,
   Icon,
+  IconColor,
   IconName,
   IconSize,
   Skeleton,
+  Tag,
+  TagSeverity,
   Text,
   TextColor,
   TextVariant,
@@ -41,41 +42,54 @@ const BenefitsPreview = () => {
   const hasBenefits = benefits.length > 0;
   const topBenefits = benefits.slice(0, 3);
 
+  const benefitsCountLabel =
+    benefits.length > 99 ? '99+' : String(benefits.length);
+
   const benefitsCountBadge =
     benefits.length > 0 ? (
-      <BadgeCount
-        count={benefits.length}
-        max={99}
-        size={BadgeCountSize.Lg}
-        twClassName={`${BoxBackgroundColor.BackgroundMuted} min-w-6 h-6`}
-        textProps={{ color: TextColor.TextDefault }}
-      />
+      <Tag severity={TagSeverity.Neutral}>
+        <Text variant={TextVariant.BodySm} color={TextColor.TextAlternative}>
+          {strings('rewards.benefits.available_count', {
+            count: benefitsCountLabel,
+          })}
+        </Text>
+      </Tag>
     ) : null;
 
   const displayHeader = hasBenefits ? (
     <Pressable onPress={handleNavigateToBenefitsFullView}>
       <Box
         flexDirection={BoxFlexDirection.Row}
         alignItems={BoxAlignItems.Center}
-        twClassName="gap-2"
+        justifyContent={BoxJustifyContent.Between}
+        twClassName="w-full"
       >
-        <Text variant={TextVariant.HeadingMd}>
-          {strings('rewards.benefits.title')}
-        </Text>
+        <Box
+          flexDirection={BoxFlexDirection.Row}
+          alignItems={BoxAlignItems.Center}
+          twClassName="gap-1"
+        >
+          <Text variant={TextVariant.HeadingMd}>
+            {strings('rewards.benefits.title')}
+          </Text>
+          <Icon
+            name={IconName.ArrowRight}
+            size={IconSize.Md}
+            color={IconColor.IconAlternative}
+          />
+        </Box>
         {benefitsCountBadge}
-        <Icon name={IconName.ArrowRight} size={IconSize.Md} />
       </Box>
     </Pressable>
   ) : (
     <Box
       flexDirection={BoxFlexDirection.Row}
       alignItems={BoxAlignItems.Center}
-      twClassName="gap-2"
+      twClassName="gap-1"
     >
       <Text variant={TextVariant.HeadingMd}>
         {strings('rewards.benefits.title')}
       </Text>
-      {benefitsCountBadge}
     </Box>
   );
 

app/components/UI/Rewards/components/Campaigns/CampaignsPreview.test.tsx

@@ -129,6 +129,20 @@ describe('CampaignsPreview', () => {
     expect(queryByTestId('campaign-tile-campaign-1')).toBeNull();
   });
 
+  it('treats undefined campaigns as an empty list for featured selection', () => {
+    mockUseRewardCampaigns.mockReturnValue({
+      ...mockHookDefaults,
+      campaigns: undefined as unknown as CampaignDto[],
+    });
+
+    const { getByTestId, queryByTestId } = render(<CampaignsPreview />);
+
+    expect(
+      getByTestId(REWARDS_VIEW_SELECTORS.CAMPAIGNS_PREVIEW),
+    ).toBeOnTheScreen();
+    expect(queryByTestId('campaign-tile-campaign-1')).toBeNull();
+  });
+
   it('renders loading skeleton when campaigns have never been loaded', () => {
     mockUseRewardCampaigns.mockReturnValue({
       ...mockHookDefaults,

app/components/UI/Rewards/components/Campaigns/CampaignsPreview.tsx

@@ -57,7 +57,7 @@ const CampaignsPreview: React.FC = () => {
         <Box
           flexDirection={BoxFlexDirection.Row}
           alignItems={BoxAlignItems.Center}
-          twClassName="gap-2"
+          twClassName="gap-1"
         >
           {(isLoading || !hasLoaded) && !hasFeaturedCampaigns && (
             <ActivityIndicator size="small" color={colors.primary.default} />

locales/languages/en.json

@@ -8598,7 +8598,8 @@
       "title_claim": "Claim Benefit",
       "action": "Claim",
       "empty-list": "You don’t have any benefits right now.",
-      "powered_by": "Powered by"
+      "powered_by": "Powered by",
+      "available_count": "{{count}} available"
     },
     "end_of_season_rewards": {
       "confirm_label_default": "Confirm",