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

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,10 @@ 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 render benefit details container without benefits', () => {
@@ -225,6 +239,18 @@ 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',
+        },
+      );
+    });
   });
 
   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.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

@@ -8592,7 +8592,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",