diff --git a/app/components/UI/Rewards/Views/BenefitFullView.test.tsx b/app/components/UI/Rewards/Views/BenefitFullView.test.tsx index 0e05ab67fe21..21c88e6ae9f2 100644 --- a/app/components/UI/Rewards/Views/BenefitFullView.test.tsx +++ b/app/components/UI/Rewards/Views/BenefitFullView.test.tsx @@ -30,6 +30,7 @@ const mockBenefit = { validTo: '2026-12-31T23:59:59Z', url: 'https://benefits.example.com/claim', actionDate: '2026-12-30T00:00:00Z', + companyName: 'Pudgy Penguins', chain: 'ethereum', type: { id: 7, name: 'Partner' }, }; @@ -119,6 +120,7 @@ describe('BenefitFullView', () => { expect(getByText('Claim benefit')).toBeOnTheScreen(); expect(getByText('Premium Benefit')).toBeOnTheScreen(); expect(getByText('Long description')).toBeOnTheScreen(); + expect(getByText('By Pudgy Penguins')).toBeOnTheScreen(); expect( getByTestId(REWARDS_VIEW_SELECTORS.DETAIL_BENEFIT_ACTION), ).toBeOnTheScreen(); @@ -207,6 +209,17 @@ describe('BenefitFullView', () => { expect(queryByText('1mo 3d')).toBeNull(); }); + it('does not render company label when companyName is null', () => { + mockRouteBenefit = { + ...mockBenefit, + companyName: null, + }; + + const { queryByText } = render(); + + expect(queryByText('By Pudgy Penguins')).toBeNull(); + }); + it('renders benefit image from thumbnail', () => { mockRouteBenefit = { ...mockBenefit, diff --git a/app/components/UI/Rewards/Views/BenefitFullView.tsx b/app/components/UI/Rewards/Views/BenefitFullView.tsx index 7c753028ed4b..72eddde5be2e 100644 --- a/app/components/UI/Rewards/Views/BenefitFullView.tsx +++ b/app/components/UI/Rewards/Views/BenefitFullView.tsx @@ -7,6 +7,7 @@ import { Box, BoxAlignItems, BoxFlexDirection, + BoxJustifyContent, Button, ButtonSize, ButtonVariant, @@ -72,6 +73,7 @@ const BenefitFullView = () => { : formatDateRemaining(benefit.actionDate, Date.now()), [benefit.actionDate], ); + const companyName = benefit.companyName?.trim(); return ( @@ -107,25 +109,48 @@ const BenefitFullView = () => { > {benefit.longTitle} - {remainingTime != null && ( + {(remainingTime != null || companyName) && ( - - - {remainingTime} - + {remainingTime != null ? ( + + + + {remainingTime} + + + ) : ( + + )} + {companyName ? ( + + {`By ${companyName}`} + + ) : null} )} { }); const createBenefit = ( - overrides: Partial = {}, + overrides: Partial & { + companyName?: string | null; + } = {}, ): SubscriptionBenefitDto => ({ id: 1, longTitle: strings('rewards.benefits.test_title'), @@ -81,6 +83,20 @@ describe('BenefitCard', () => { ).toBeOnTheScreen(); }); + it('renders company name when provided', () => { + const benefit = createBenefit({ companyName: 'Pudgy Penguins' }); + const { getByText } = render(); + + expect(getByText('Pudgy Penguins')).toBeOnTheScreen(); + }); + + it('does not render an empty company label when companyName is null', () => { + const benefit = createBenefit({ companyName: null }); + const { queryByText } = render(); + + expect(queryByText('Pudgy Penguins')).toBeNull(); + }); + it('applies text truncation limits for title and description', () => { const benefit = createBenefit(); const { getByText } = render(); diff --git a/app/components/UI/Rewards/components/Benefits/BenefitCard.tsx b/app/components/UI/Rewards/components/Benefits/BenefitCard.tsx index c61936731637..520fba6e44cc 100644 --- a/app/components/UI/Rewards/components/Benefits/BenefitCard.tsx +++ b/app/components/UI/Rewards/components/Benefits/BenefitCard.tsx @@ -4,6 +4,7 @@ import { Box, BoxAlignItems, BoxFlexDirection, + BoxJustifyContent, Icon, IconColor, IconName, @@ -31,6 +32,7 @@ const BenefitCard = ({ benefit }: Props) => { benefit.actionDate == null ? null : formatDateRemaining(benefit.actionDate, Date.now()); + const companyName = benefit.companyName?.trim(); return ( { - - {benefit.longTitle} - + + {benefit.longTitle} + + {companyName ? ( + + {companyName} + + ) : null} +