Skip to content

Commit 6b40dbe

Browse files
runway-github[bot]sophieqguMontoya
authored
chore(runway): cherry-pick fix(rewards): update VIP referee dashboard (#32056)
- fix(rewards): update VIP referee dashboard (#31921) <!-- 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. --> <!-- mms-check directive vocabulary — read by .github/scripts/shared/pr-template-checks.ts at module load to build the validation plan. Directives are invisible in rendered markdown and must NOT be removed or edited without updating the validator registry. type=text Section must contain non-placeholder prose. type=changelog Section must have a valid CHANGELOG entry: line. type=issue-link Section must have a Fixes:/Closes:/Refs: line with a value. type=manual-testing Section must have real testing steps or an explicit N/A. type=screenshot Section must have evidence (image/URL) or an explicit N/A. type=checklist Section must have all checkboxes consciously checked. required=true|false Whether a missing/invalid section runs the validator at all. blocking=true|false Whether a failure of this check fails the CI workflow. Default: false — failures are shown as a warning in the sticky comment but do not block the PR. Sections without a directive are checked for structural presence only. --> ## **Description** <!-- mms-check: type=text required=true --> Updates the VIP invite and referee splash experiences to use the **Gold Fox Collective** branding, consolidates duplicated splash UI/copy, and updates the VIP referee dashboard stats. **Splash screens** - Rebranded `splash_title` from "Gold Fox VIP" to "Welcome to Gold Fox Collective" across all locales - Removed duplicate `referee_splash_*` translation keys that mirrored shared `splash_*` strings (kept `referee_splash_continue` since it differs from `splash_accept_invite`) - Extracted shared `VipSplashGradientTitle` and `VipSplashScreenLayout` components - Removed thin `VipSplashScreen` / `VipRefereeSplashScreen` wrappers; views now render the shared layout directly **VIP referee dashboard** - Replaced the generic **Points** stat with **Points to {referredByCode}** using `dashboard.points` - Kept **Swaps volume** and **Perps volume** as separate stat cells (not combined) - Updated loading skeleton to match the three-cell layout - Added `referee_points_to_label` and restored `referee_swaps_volume_label` / `referee_perps_volume_label` in all supported locales **Tests** - Added unit tests for `VipSplashGradientTitle` and `VipSplashScreenLayout` - Extended `RewardsVipRefereeView` coverage for separate volume cells, points-to label, and missing referral code ## **Changelog** <!-- mms-check: type=changelog required=true blocking=true --> CHANGELOG entry: Updated VIP splash screens to say "Welcome to Gold Fox Collective" and updated the VIP referee dashboard to show swaps volume, perps volume, and points to referrer. ## **Related issues** <!-- mms-check: type=issue-link required=true --> Fixes: https://consensyssoftware.atlassian.net/browse/RWDS-1402 ## **Manual testing steps** <!-- mms-check: type=manual-testing required=true --> ```gherkin Feature: VIP splash and referee dashboard updates Scenario: VIP invite splash shows Gold Fox Collective branding Given a user with VIP program enabled and an unaccepted VIP invite When the user opens the VIP splash screen Then the title reads "Welcome to Gold Fox Collective" And the primary CTA reads "Accept invite" Scenario: VIP referee splash shows Gold Fox Collective branding Given a user flagged as a VIP referee who has not accepted the referee splash When the user opens the VIP referee splash screen Then the title reads "Welcome to Gold Fox Collective" And the primary CTA reads "Continue" And the referred-by code is shown when available Scenario: VIP referee dashboard shows updated stats Given a VIP referee user with dashboard data loaded When the user opens the VIP referee dashboard Then the stats section shows "Swaps volume" and "Perps volume" separately And the stats section shows "Points to {referredByCode}" with dashboard points ``` ## **Screenshots/Recordings** <!-- mms-check: type=screenshot required=true --> <!-- If applicable, add screenshots and/or recordings to visualize the before and after of your change. --> ### **Before** <!-- [screenshots/recordings] --> ### **After** Edit: Screenshots look good, removed. ## **Pre-merge author checklist** <!-- mms-check: type=checklist required=true --> <!-- 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) - [x] I've tested on Android - Ideally on a mid-range device; emulator is acceptable - [x] 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 - [x] 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`. --> - [x] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [x] 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. [baeb028](baeb028) Co-authored-by: sophieqgu <37032128+sophieqgu@users.noreply.github.com> Co-authored-by: Christian Montoya <christian.montoya@consensys.net>
1 parent 0b1e142 commit 6b40dbe

28 files changed

Lines changed: 540 additions & 328 deletions

‎app/components/UI/Rewards/Views/RewardsVipRefereeSplashView.test.tsx‎

Lines changed: 39 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { useSelector } from 'react-redux';
55
import Routes from '../../../../constants/navigation/Routes';
66
import { selectRewardsSubscriptionId } from '../../../../selectors/rewards';
77
import { selectVipProgramEnabled } from '../../../../selectors/featureFlagController/vipProgram';
8-
import { VIP_REFEREE_SPLASH_SCREEN_TEST_IDS } from '../components/Vip/VipRefereeSplashScreen';
8+
import { VIP_REFEREE_SPLASH_SCREEN_TEST_IDS } from '../components/Vip/VipSplashScreenLayout';
99
import RewardsVipRefereeSplashView from './RewardsVipRefereeSplashView';
1010

1111
const mockNavigateDispatch = jest.fn();
@@ -102,11 +102,11 @@ jest.mock('../../../../images/rewards/vip_splash.png', () => 1);
102102
jest.mock('../../../../../locales/i18n', () => ({
103103
strings: jest.fn((key: string, opts?: Record<string, string>) => {
104104
const translations: Record<string, string> = {
105-
'rewards.vip.referee_splash_title': 'WELCOME\nTO MOCK\nFOX VIP',
106-
'rewards.vip.referee_splash_description':
105+
'rewards.vip.splash_title': 'WELCOME\nTO MOCK\nFOX COLLECTIVE',
106+
'rewards.vip.splash_description':
107107
'Placeholder referee splash copy for tests only.',
108108
'rewards.vip.referee_splash_continue': 'Continue',
109-
'rewards.vip.referee_splash_not_now': 'Not now',
109+
'rewards.vip.splash_not_now': 'Not now',
110110
};
111111
if (key === 'rewards.vip.referee_referred_by') {
112112
return `Referred by ${opts?.code ?? ''}`;
@@ -165,8 +165,42 @@ describe('RewardsVipRefereeSplashView', () => {
165165
expect(
166166
getByTestId(VIP_REFEREE_SPLASH_SCREEN_TEST_IDS.CONTAINER),
167167
).toBeOnTheScreen();
168-
expect(getAllByText('WELCOME\nTO MOCK\nFOX VIP')[0]).toBeOnTheScreen();
168+
expect(
169+
getAllByText('WELCOME\nTO MOCK\nFOX COLLECTIVE')[0],
170+
).toBeOnTheScreen();
169171
expect(getByText('Referred by TESTCODE')).toBeOnTheScreen();
172+
expect(
173+
getByTestId(VIP_REFEREE_SPLASH_SCREEN_TEST_IDS.REFERRED_BY),
174+
).toBeOnTheScreen();
175+
});
176+
177+
it('omits the referred-by footer when no referral code is available', () => {
178+
mockUseSelector.mockImplementation((selector) => {
179+
if (selector === selectRewardsSubscriptionId) return mockSubscriptionId;
180+
if (selector === selectVipProgramEnabled) return mockIsVipProgramEnabled;
181+
182+
return (
183+
selector as (state: {
184+
rewards: {
185+
isVipReferee: boolean;
186+
referredByVipCode: string | null;
187+
vipRefereeSplashAccepted: Record<string, boolean>;
188+
};
189+
}) => unknown
190+
)({
191+
rewards: {
192+
isVipReferee: mockIsVipReferee,
193+
referredByVipCode: null,
194+
vipRefereeSplashAccepted: mockVipRefereeSplashAccepted,
195+
},
196+
});
197+
});
198+
199+
const { queryByTestId } = render(<RewardsVipRefereeSplashView />);
200+
201+
expect(
202+
queryByTestId(VIP_REFEREE_SPLASH_SCREEN_TEST_IDS.REFERRED_BY),
203+
).toBeNull();
170204
});
171205

172206
it('replaces with the referee view when continue is pressed', () => {

‎app/components/UI/Rewards/Views/RewardsVipRefereeSplashView.tsx‎

Lines changed: 37 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
import React, { useCallback, useEffect } from 'react';
22
import { StackActions, useNavigation } from '@react-navigation/native';
33
import { useSelector } from 'react-redux';
4+
import {
5+
FontWeight,
6+
Text,
7+
TextVariant,
8+
} from '@metamask/design-system-react-native';
9+
import { useTailwind } from '@metamask/design-system-twrnc-preset';
410
import Routes from '../../../../constants/navigation/Routes';
511
import {
612
selectHasAcceptedVipRefereeInvite,
@@ -9,11 +15,16 @@ import {
915
} from '../../../../reducers/rewards/selectors';
1016
import { selectRewardsSubscriptionId } from '../../../../selectors/rewards';
1117
import { selectVipProgramEnabled } from '../../../../selectors/featureFlagController/vipProgram';
18+
import { strings } from '../../../../../locales/i18n';
1219
import ErrorBoundary from '../../../Views/ErrorBoundary';
13-
import VipRefereeSplashScreen from '../components/Vip/VipRefereeSplashScreen';
20+
import { VIP_GOLD_TEXT_MUTED } from '../components/Vip/Vip.constants';
21+
import VipSplashScreenLayout, {
22+
VIP_REFEREE_SPLASH_SCREEN_TEST_IDS,
23+
} from '../components/Vip/VipSplashScreenLayout';
1424

1525
const RewardsVipRefereeSplashViewContent: React.FC = () => {
1626
const navigation = useNavigation();
27+
const tw = useTailwind();
1728
const subscriptionId = useSelector(selectRewardsSubscriptionId);
1829
const isVipProgramEnabled = useSelector(selectVipProgramEnabled);
1930
const isVipReferee = useSelector(selectIsVipReferee);
@@ -62,10 +73,32 @@ const RewardsVipRefereeSplashViewContent: React.FC = () => {
6273
}
6374

6475
return (
65-
<VipRefereeSplashScreen
66-
onContinue={handleContinue}
76+
<VipSplashScreenLayout
77+
testIDs={{
78+
container: VIP_REFEREE_SPLASH_SCREEN_TEST_IDS.CONTAINER,
79+
title: VIP_REFEREE_SPLASH_SCREEN_TEST_IDS.TITLE,
80+
description: VIP_REFEREE_SPLASH_SCREEN_TEST_IDS.DESCRIPTION,
81+
fox: VIP_REFEREE_SPLASH_SCREEN_TEST_IDS.FOX,
82+
primaryButton: VIP_REFEREE_SPLASH_SCREEN_TEST_IDS.CONTINUE_BUTTON,
83+
notNowButton: VIP_REFEREE_SPLASH_SCREEN_TEST_IDS.NOT_NOW_BUTTON,
84+
}}
85+
onPrimaryPress={handleContinue}
6786
onNotNow={handleNotNow}
68-
referredByCode={referredByVipCode}
87+
primaryButtonLabel={strings('rewards.vip.referee_splash_continue')}
88+
footerContent={
89+
referredByVipCode ? (
90+
<Text
91+
variant={TextVariant.BodyMd}
92+
fontWeight={FontWeight.Medium}
93+
style={tw.style('text-center', { color: VIP_GOLD_TEXT_MUTED })}
94+
testID={VIP_REFEREE_SPLASH_SCREEN_TEST_IDS.REFERRED_BY}
95+
>
96+
{strings('rewards.vip.referee_referred_by', {
97+
code: referredByVipCode,
98+
})}
99+
</Text>
100+
) : null
101+
}
69102
/>
70103
);
71104
};

‎app/components/UI/Rewards/Views/RewardsVipRefereeView.test.tsx‎

Lines changed: 43 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -135,11 +135,13 @@ jest.mock('../../../../../locales/i18n', () => ({
135135
if (key === 'rewards.vip.referee_referred_by') {
136136
return `Referred by ${params?.code ?? ''}`;
137137
}
138+
if (key === 'rewards.vip.referee_points_to_label') {
139+
return `Points to ${params?.code ?? ''}`;
140+
}
138141
const translations: Record<string, string> = {
139142
'rewards.vip.referee_page_title': 'VIP Pilot',
140143
'rewards.vip.referee_stats_title': 'Stats',
141144
'rewards.vip.referee_period_last_30d': 'Last 30d',
142-
'rewards.vip.referee_points_label': 'Points',
143145
'rewards.vip.referee_swaps_volume_label': 'Swaps volume',
144146
'rewards.vip.referee_perps_volume_label': 'Perps volume',
145147
'rewards.vip.referee_error_title': 'Error title',
@@ -280,21 +282,57 @@ describe('RewardsVipRefereeView', () => {
280282
).toBeOnTheScreen();
281283
expect(getByText('VIP Pilot')).toBeOnTheScreen();
282284
expect(getByText('Referred by TESTCODE')).toBeOnTheScreen();
283-
expect(
284-
getByTestId(REWARDS_VIP_REFEREE_VIEW_TEST_IDS.POINTS),
285-
).toBeOnTheScreen();
285+
expect(getByText('Swaps volume')).toBeOnTheScreen();
286+
expect(getByText('Perps volume')).toBeOnTheScreen();
287+
expect(getByText('Points to TESTCODE')).toBeOnTheScreen();
286288
expect(
287289
getByTestId(REWARDS_VIP_REFEREE_VIEW_TEST_IDS.SWAPS_VOLUME),
288290
).toBeOnTheScreen();
289291
expect(
290292
getByTestId(REWARDS_VIP_REFEREE_VIEW_TEST_IDS.PERPS_VOLUME),
291293
).toBeOnTheScreen();
294+
expect(
295+
getByTestId(REWARDS_VIP_REFEREE_VIEW_TEST_IDS.POINTS_TO),
296+
).toBeOnTheScreen();
292297
expect(mockUseTrack).toHaveBeenCalledWith({
293298
page_type: 'vip_referee',
294299
enabled: true,
295300
});
296301
});
297302

303+
it('displays swaps and perps volume in separate stat cells', () => {
304+
const { getByTestId } = render(<RewardsVipRefereeView />);
305+
306+
expect(
307+
getByTestId(REWARDS_VIP_REFEREE_VIEW_TEST_IDS.SWAPS_VOLUME),
308+
).toHaveTextContent(/\$1,000/);
309+
expect(
310+
getByTestId(REWARDS_VIP_REFEREE_VIEW_TEST_IDS.PERPS_VOLUME),
311+
).toHaveTextContent(/\$2,000/);
312+
});
313+
314+
it('displays dashboard points in the points-to stat cell', () => {
315+
const { getByTestId } = render(<RewardsVipRefereeView />);
316+
317+
expect(
318+
getByTestId(REWARDS_VIP_REFEREE_VIEW_TEST_IDS.POINTS_TO),
319+
).toHaveTextContent(/1,234/);
320+
});
321+
322+
it('renders an empty points-to label when referredByCode is missing', () => {
323+
mockUseVipRefereeDashboard.mockReturnValue({
324+
dashboard: { ...defaultDashboard, referredByCode: null },
325+
isLoading: false,
326+
hasError: false,
327+
hasAttemptedFetch: true,
328+
fetchVipRefereeDashboard: mockFetch,
329+
});
330+
331+
const { getByText } = render(<RewardsVipRefereeView />);
332+
333+
expect(getByText('Points to ')).toBeOnTheScreen();
334+
});
335+
298336
it('renders the "Last updated" row when computedAt is present', () => {
299337
const { getByTestId } = render(<RewardsVipRefereeView />);
300338

@@ -405,7 +443,7 @@ describe('RewardsVipRefereeView', () => {
405443
screen: Routes.WEBVIEW.SIMPLE,
406444
params: {
407445
url: expect.stringContaining(
408-
`priority=vip&account=${encodeURIComponent(mockAccountAddress)}`,
446+
`priority=vip&address=${encodeURIComponent(mockAccountAddress)}`,
409447
),
410448
title: 'Contact support',
411449
},

‎app/components/UI/Rewards/Views/RewardsVipRefereeView.tsx‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -56,9 +56,9 @@ export const REWARDS_VIP_REFEREE_VIEW_TEST_IDS = {
5656
SKELETON: 'rewards-vip-referee-view-skeleton',
5757
ERROR: 'rewards-vip-referee-view-error',
5858
REFERRED_BY_CARD: 'rewards-vip-referee-view-referred-by-card',
59-
POINTS: 'rewards-vip-referee-view-points',
6059
SWAPS_VOLUME: 'rewards-vip-referee-view-swaps-volume',
6160
PERPS_VOLUME: 'rewards-vip-referee-view-perps-volume',
61+
POINTS_TO: 'rewards-vip-referee-view-points-to',
6262
LAST_UPDATED: 'rewards-vip-referee-view-last-updated',
6363
CONTACT_SUPPORT_BUTTON: 'rewards-vip-referee-view-contact-support-button',
6464
} as const;
@@ -197,8 +197,8 @@ const RewardsVipRefereeViewContent: React.FC = () => {
197197

198198
<Box flexDirection={BoxFlexDirection.Row} twClassName="gap-6">
199199
<Box twClassName="flex-1 gap-1">
200-
<Skeleton style={tw.style('h-4 w-20 rounded-lg')} />
201-
<Skeleton style={tw.style('h-6 w-16 rounded-lg')} />
200+
<Skeleton style={tw.style('h-4 w-24 rounded-lg')} />
201+
<Skeleton style={tw.style('h-6 w-20 rounded-lg')} />
202202
</Box>
203203
<Box twClassName="flex-1 gap-1">
204204
<Skeleton style={tw.style('h-4 w-24 rounded-lg')} />
@@ -207,8 +207,8 @@ const RewardsVipRefereeViewContent: React.FC = () => {
207207
</Box>
208208

209209
<Box twClassName="gap-1">
210-
<Skeleton style={tw.style('h-4 w-24 rounded-lg')} />
211-
<Skeleton style={tw.style('h-6 w-20 rounded-lg')} />
210+
<Skeleton style={tw.style('h-4 w-28 rounded-lg')} />
211+
<Skeleton style={tw.style('h-6 w-16 rounded-lg')} />
212212
</Box>
213213

214214
<Skeleton style={tw.style('h-4 w-36 rounded-lg')} />
@@ -269,55 +269,57 @@ const RewardsVipRefereeViewContent: React.FC = () => {
269269
<Box flexDirection={BoxFlexDirection.Row} twClassName="gap-6">
270270
<Box
271271
twClassName="flex-1"
272-
testID={REWARDS_VIP_REFEREE_VIEW_TEST_IDS.POINTS}
272+
testID={REWARDS_VIP_REFEREE_VIEW_TEST_IDS.SWAPS_VOLUME}
273273
>
274274
<Text
275275
variant={TextVariant.BodySm}
276276
color={TextColor.TextAlternative}
277277
>
278-
{strings('rewards.vip.referee_points_label')}
278+
{strings('rewards.vip.referee_swaps_volume_label')}
279279
</Text>
280280
<Text
281281
variant={TextVariant.HeadingSm}
282282
fontWeight={FontWeight.Bold}
283283
>
284-
{formatNumber(dashboard.points)}
284+
{formatUsd(dashboard.swapsVolume)}
285285
</Text>
286286
</Box>
287287
<Box
288288
twClassName="flex-1"
289-
testID={REWARDS_VIP_REFEREE_VIEW_TEST_IDS.SWAPS_VOLUME}
289+
testID={REWARDS_VIP_REFEREE_VIEW_TEST_IDS.PERPS_VOLUME}
290290
>
291291
<Text
292292
variant={TextVariant.BodySm}
293293
color={TextColor.TextAlternative}
294294
>
295-
{strings('rewards.vip.referee_swaps_volume_label')}
295+
{strings('rewards.vip.referee_perps_volume_label')}
296296
</Text>
297297
<Text
298298
variant={TextVariant.HeadingSm}
299299
fontWeight={FontWeight.Bold}
300300
>
301-
{formatUsd(dashboard.swapsVolume)}
301+
{formatUsd(dashboard.perpsVolume)}
302302
</Text>
303303
</Box>
304304
</Box>
305305

306306
<Box
307307
twClassName="flex-1"
308-
testID={REWARDS_VIP_REFEREE_VIEW_TEST_IDS.PERPS_VOLUME}
308+
testID={REWARDS_VIP_REFEREE_VIEW_TEST_IDS.POINTS_TO}
309309
>
310310
<Text
311311
variant={TextVariant.BodySm}
312312
color={TextColor.TextAlternative}
313313
>
314-
{strings('rewards.vip.referee_perps_volume_label')}
314+
{strings('rewards.vip.referee_points_to_label', {
315+
code: dashboard.referredByCode ?? '',
316+
})}
315317
</Text>
316318
<Text
317319
variant={TextVariant.HeadingSm}
318320
fontWeight={FontWeight.Bold}
319321
>
320-
{formatUsd(dashboard.perpsVolume)}
322+
{formatNumber(dashboard.points)}
321323
</Text>
322324
</Box>
323325

‎app/components/UI/Rewards/Views/RewardsVipSplashView.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
selectRewardsSubscriptionId,
99
} from '../../../../selectors/rewards';
1010
import { selectVipProgramEnabled } from '../../../../selectors/featureFlagController/vipProgram';
11-
import { VIP_SPLASH_SCREEN_TEST_IDS } from '../components/Vip/VipSplashScreen';
11+
import { VIP_SPLASH_SCREEN_TEST_IDS } from '../components/Vip/VipSplashScreenLayout';
1212
import { useVipDashboard } from '../hooks/useVipDashboard';
1313
import RewardsVipSplashView from './RewardsVipSplashView';
1414

‎app/components/UI/Rewards/Views/RewardsVipSplashView.tsx‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,11 @@ import {
88
selectRewardsSubscriptionId,
99
} from '../../../../selectors/rewards';
1010
import { selectVipProgramEnabled } from '../../../../selectors/featureFlagController/vipProgram';
11+
import { strings } from '../../../../../locales/i18n';
1112
import ErrorBoundary from '../../../Views/ErrorBoundary';
12-
import VipSplashScreen from '../components/Vip/VipSplashScreen';
13+
import VipSplashScreenLayout, {
14+
VIP_SPLASH_SCREEN_TEST_IDS,
15+
} from '../components/Vip/VipSplashScreenLayout';
1316
import { useVipDashboard } from '../hooks/useVipDashboard';
1417

1518
const RewardsVipSplashViewContent: React.FC = () => {
@@ -59,9 +62,18 @@ const RewardsVipSplashViewContent: React.FC = () => {
5962
}
6063

6164
return (
62-
<VipSplashScreen
63-
onAcceptInvite={handleAcceptInvite}
65+
<VipSplashScreenLayout
66+
testIDs={{
67+
container: VIP_SPLASH_SCREEN_TEST_IDS.CONTAINER,
68+
title: VIP_SPLASH_SCREEN_TEST_IDS.TITLE,
69+
description: VIP_SPLASH_SCREEN_TEST_IDS.DESCRIPTION,
70+
fox: VIP_SPLASH_SCREEN_TEST_IDS.FOX,
71+
primaryButton: VIP_SPLASH_SCREEN_TEST_IDS.ACCEPT_BUTTON,
72+
notNowButton: VIP_SPLASH_SCREEN_TEST_IDS.NOT_NOW_BUTTON,
73+
}}
74+
onPrimaryPress={handleAcceptInvite}
6475
onNotNow={handleNotNow}
76+
primaryButtonLabel={strings('rewards.vip.splash_accept_invite')}
6577
/>
6678
);
6779
};

0 commit comments

Comments
 (0)