Skip to content

Commit df11653

Browse files
sophieqgusophieqgu
committed
Add onboarding steps
1 parent 285eb95 commit df11653

File tree

7 files changed

+117
-41
lines changed

7 files changed

+117
-41
lines changed

‎ui/components/app/rewards/components/onboarding/ProgressIndicator.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React from 'react';
2+
import {
3+
Box,
4+
BoxFlexDirection,
5+
BoxJustifyContent,
6+
BoxAlignItems,
7+
} from '@metamask/design-system-react';
8+
9+
import { useTheme } from '../../../../../hooks/useTheme';
10+
11+
type ProgressIndicatorProps = {
12+
totalSteps: number;
13+
currentStep: number;
14+
};
15+
16+
const ProgressIndicator: React.FC<ProgressIndicatorProps> = ({
17+
totalSteps,
18+
currentStep,
19+
}) => {
20+
const theme = useTheme();
21+
const activeColor = theme === 'light' ? 'bg-black' : 'bg-white';
22+
23+
return (
24+
<Box
25+
flexDirection={BoxFlexDirection.Row}
26+
justifyContent={BoxJustifyContent.Center}
27+
alignItems={BoxAlignItems.Center}
28+
className="gap-1"
29+
data-testid="progress-indicator-container"
30+
>
31+
{Array.from({ length: totalSteps }, (_, index) => (
32+
<Box
33+
key={index}
34+
className={`h-3 rounded-xl
35+
${index === currentStep - 1 ? `w-6 ${activeColor}` : 'w-3 h-3 bg-muted'}`}
36+
/>
37+
))}
38+
</Box>
39+
);
40+
};
41+
42+
export default ProgressIndicator;

‎ui/components/app/rewards/components/onboarding/onboarding-intro-step.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
BoxFlexDirection,
77
Button,
88
ButtonSize,
9+
ButtonVariant,
910
FontFamily,
1011
Text,
1112
TextVariant,
@@ -95,11 +96,14 @@ const OnboardingIntroStep: React.FC = () => {
9596
const renderActions = () => (
9697
<Box className="flex flex-col justify-end flex-1">
9798
<Button
99+
variant={ButtonVariant.Primary}
98100
size={ButtonSize.Lg}
99101
onClick={handleNext}
100-
className="w-full bg-white my-2"
102+
className="w-full my-2 bg-white"
101103
>
102-
{t('rewardsOnboardingIntroStepConfirm')}
104+
<Text variant={TextVariant.BodyMd} className="text-black font-medium">
105+
{t('rewardsOnboardingIntroStepConfirm')}
106+
</Text>
103107
</Button>
104108
<Button
105109
size={ButtonSize.Lg}

‎ui/components/app/rewards/components/onboarding/onboarding-modal.tsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
} from '../../../../../ducks/rewards/selectors';
1919
import { setOnboardingModalOpen } from '../../../../../ducks/rewards';
2020
import { OnboardingStep } from '../../../../../ducks/rewards/types';
21+
import { useTheme } from '../../../../../hooks/useTheme';
2122
import OnboardingIntroStep from './onboarding-intro-step';
2223
import OnboardingStep1 from './onboarding-step-1';
2324
import OnboardingStep2 from './onboarding-step-2';
@@ -30,6 +31,8 @@ export default function OnboardingModal() {
3031
const onboardingStep = useSelector(selectOnboardingActiveStep);
3132
const dispatch = useDispatch();
3233

34+
const theme = useTheme();
35+
3336
const handleClose = useCallback(() => {
3437
dispatch(setOnboardingModalOpen(false));
3538
}, [dispatch]);
@@ -70,9 +73,15 @@ export default function OnboardingModal() {
7073
}}
7174
>
7275
<ModalHeader
73-
data-theme={ThemeType.dark}
76+
data-theme={theme === 'light' ? ThemeType.light : ThemeType.dark}
7477
closeButtonProps={{
75-
className: 'absolute top-2 right-2 z-10',
78+
className: 'absolute z-10',
79+
style: {
80+
top: '24px',
81+
right: '12px',
82+
display:
83+
onboardingStep === OnboardingStep.INTRO ? 'none' : 'block',
84+
},
7685
}}
7786
paddingBottom={0}
7887
onClose={handleClose}

‎ui/components/app/rewards/components/onboarding/onboarding-step-1.tsx‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11
import { useDispatch } from 'react-redux';
22
import React, { useCallback } from 'react';
3-
import { setOnboardingActiveStep } from '../../../../../ducks/rewards';
4-
import { OnboardingStep } from '../../../../../ducks/rewards/types';
53
import {
64
Box,
75
Button,
86
ButtonSize,
7+
ButtonVariant,
98
Text,
109
TextVariant,
1110
} from '@metamask/design-system-react';
11+
import { setOnboardingActiveStep } from '../../../../../ducks/rewards';
12+
import { OnboardingStep } from '../../../../../ducks/rewards/types';
1213
import { ModalBody } from '../../../../component-library';
1314
import { useI18nContext } from '../../../../../hooks/useI18nContext';
15+
import ProgressIndicator from './ProgressIndicator';
1416

1517
const OnboardingStep1: React.FC = () => {
1618
const dispatch = useDispatch();
@@ -45,7 +47,7 @@ const OnboardingStep1: React.FC = () => {
4547
);
4648

4749
const renderStepInfo = () => (
48-
<Box className="flex flex-col min-h-30 gap-2">
50+
<Box className="flex flex-col min-h-30 gap-2 flex-1 justify-end">
4951
<Text variant={TextVariant.HeadingLg} className="text-center">
5052
{t('rewardsOnboardingStep1Title')}
5153
</Text>
@@ -62,11 +64,12 @@ const OnboardingStep1: React.FC = () => {
6264
* Renders the action buttons section
6365
*/
6466
const renderActions = () => (
65-
<Box className="flex flex-col justify-end flex-1 mb-2">
67+
<Box className="flex flex-col my-2">
6668
<Button
69+
variant={ButtonVariant.Primary}
6770
size={ButtonSize.Lg}
6871
onClick={handleNext}
69-
className="w-full bg-white my-2"
72+
className="w-full my-2"
7073
>
7174
{t('rewardsOnboardingStepConfirm')}
7275
</Button>
@@ -75,6 +78,9 @@ const OnboardingStep1: React.FC = () => {
7578

7679
return (
7780
<ModalBody className="w-full h-full pt-8 pb-4 flex flex-col">
81+
{/* Progress Indicator */}
82+
<ProgressIndicator totalSteps={4} currentStep={1} />
83+
7884
{/* Image Section */}
7985
{renderStepImage()}
8086

‎ui/components/app/rewards/components/onboarding/onboarding-step-2.tsx‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11
import { useDispatch } from 'react-redux';
22
import React, { useCallback } from 'react';
3-
import { setOnboardingActiveStep } from '../../../../../ducks/rewards';
4-
import { OnboardingStep } from '../../../../../ducks/rewards/types';
53
import {
64
Box,
75
Button,
86
ButtonSize,
7+
ButtonVariant,
98
Text,
109
TextVariant,
1110
} from '@metamask/design-system-react';
11+
import { setOnboardingActiveStep } from '../../../../../ducks/rewards';
12+
import { OnboardingStep } from '../../../../../ducks/rewards/types';
1213
import { ModalBody } from '../../../../component-library';
1314
import { useI18nContext } from '../../../../../hooks/useI18nContext';
15+
import ProgressIndicator from './ProgressIndicator';
1416

1517
const OnboardingStep2: React.FC = () => {
1618
const dispatch = useDispatch();
@@ -45,7 +47,7 @@ const OnboardingStep2: React.FC = () => {
4547
);
4648

4749
const renderStepInfo = () => (
48-
<Box className="flex flex-col min-h-30 gap-2">
50+
<Box className="flex flex-col min-h-30 gap-2 flex-1 justify-end">
4951
<Text variant={TextVariant.HeadingLg} className="text-center">
5052
{t('rewardsOnboardingStep2Title')}
5153
</Text>
@@ -62,11 +64,12 @@ const OnboardingStep2: React.FC = () => {
6264
* Renders the action buttons section
6365
*/
6466
const renderActions = () => (
65-
<Box className="flex flex-col justify-end flex-1 mb-2">
67+
<Box className="flex flex-col justify-end my-2">
6668
<Button
69+
variant={ButtonVariant.Primary}
6770
size={ButtonSize.Lg}
6871
onClick={handleNext}
69-
className="w-full bg-white my-2"
72+
className="w-full my-2"
7073
>
7174
{t('rewardsOnboardingStepConfirm')}
7275
</Button>
@@ -75,6 +78,9 @@ const OnboardingStep2: React.FC = () => {
7578

7679
return (
7780
<ModalBody className="w-full h-full pt-8 pb-4 flex flex-col">
81+
{/* Progress Indicator */}
82+
<ProgressIndicator totalSteps={4} currentStep={2} />
83+
7884
{/* Image Section */}
7985
{renderStepImage()}
8086

‎ui/components/app/rewards/components/onboarding/onboarding-step-3.tsx‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11
import { useDispatch } from 'react-redux';
22
import React, { useCallback } from 'react';
3-
import { setOnboardingActiveStep } from '../../../../../ducks/rewards';
4-
import { OnboardingStep } from '../../../../../ducks/rewards/types';
53
import {
64
Box,
75
Button,
86
ButtonSize,
7+
ButtonVariant,
98
Text,
109
TextVariant,
1110
} from '@metamask/design-system-react';
11+
import { setOnboardingActiveStep } from '../../../../../ducks/rewards';
12+
import { OnboardingStep } from '../../../../../ducks/rewards/types';
1213
import { ModalBody } from '../../../../component-library';
1314
import { useI18nContext } from '../../../../../hooks/useI18nContext';
15+
import ProgressIndicator from './ProgressIndicator';
1416

1517
const OnboardingStep3: React.FC = () => {
1618
const dispatch = useDispatch();
@@ -45,7 +47,7 @@ const OnboardingStep3: React.FC = () => {
4547
);
4648

4749
const renderStepInfo = () => (
48-
<Box className="flex flex-col min-h-30 gap-2">
50+
<Box className="flex flex-col min-h-30 gap-2 flex-1 justify-end">
4951
<Text variant={TextVariant.HeadingLg} className="text-center">
5052
{t('rewardsOnboardingStep3Title')}
5153
</Text>
@@ -62,11 +64,12 @@ const OnboardingStep3: React.FC = () => {
6264
* Renders the action buttons section
6365
*/
6466
const renderActions = () => (
65-
<Box className="flex flex-col justify-end flex-1 mb-2">
67+
<Box className="flex flex-col justify-end my-2">
6668
<Button
69+
variant={ButtonVariant.Primary}
6770
size={ButtonSize.Lg}
6871
onClick={handleNext}
69-
className="w-full bg-white my-2"
72+
className="w-full my-2"
7073
>
7174
{t('rewardsOnboardingStepConfirm')}
7275
</Button>
@@ -75,6 +78,9 @@ const OnboardingStep3: React.FC = () => {
7578

7679
return (
7780
<ModalBody className="w-full h-full pt-8 pb-4 flex flex-col">
81+
{/* Progress Indicator */}
82+
<ProgressIndicator totalSteps={4} currentStep={3} />
83+
7884
{/* Image Section */}
7985
{renderStepImage()}
8086

‎ui/components/app/rewards/components/onboarding/onboarding-step-4.tsx‎

Lines changed: 25 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import { useDispatch } from 'react-redux';
22
import React, { useCallback, useState } from 'react';
3-
import { setOnboardingActiveStep } from '../../../../../ducks/rewards';
4-
import { OnboardingStep } from '../../../../../ducks/rewards/types';
53
import {
64
Box,
75
BoxAlignItems,
86
BoxFlexDirection,
97
Button,
108
ButtonSize,
9+
ButtonVariant,
1110
FontWeight,
1211
Icon,
1312
IconColor,
@@ -16,20 +15,21 @@ import {
1615
Text,
1716
TextVariant,
1817
} from '@metamask/design-system-react';
18+
import { Link } from '@material-ui/core';
1919
import {
2020
ModalBody,
2121
TextField,
2222
TextFieldSize,
2323
} from '../../../../component-library';
2424
import { useI18nContext } from '../../../../../hooks/useI18nContext';
25-
import useValidateReferralCode from '../../hooks/useValidateReferralCode';
25+
import { useValidateReferralCode } from '../../hooks/useValidateReferralCode';
2626
import LoadingIndicator from '../../../../ui/loading-indicator';
2727
import RewardsErrorBanner from '../RewardsErrorBanner';
2828
import {
2929
REWARDS_ONBOARD_OPTIN_LEGAL_LEARN_MORE_URL,
3030
REWARDS_ONBOARD_TERMS_URL,
3131
} from './constants';
32-
import { Link } from '@material-ui/core';
32+
import ProgressIndicator from './ProgressIndicator';
3333

3434
const OnboardingStep4: React.FC = () => {
3535
const dispatch = useDispatch();
@@ -66,7 +66,12 @@ const OnboardingStep4: React.FC = () => {
6666
const renderIcon = () => {
6767
if (isValidatingReferralCode) {
6868
return (
69-
<LoadingIndicator alt={undefined} title={undefined} isLoading={true} />
69+
<LoadingIndicator
70+
alt={undefined}
71+
title={undefined}
72+
isLoading={true}
73+
style={{ width: 32, height: 32 }}
74+
/>
7075
);
7176
}
7277

@@ -93,19 +98,16 @@ const OnboardingStep4: React.FC = () => {
9398
return null;
9499
};
95100

96-
const renderStepImage = () => (
97-
<img
98-
src="/images/rewards/rewards-onboarding-step4.png"
99-
className="z-10 object-contain self-center my-4"
100-
width={100}
101-
height={100}
102-
alt={t('rewardsOnboardingStep4Title')}
103-
/>
104-
);
105-
106101
const renderStepInfo = () => (
107-
<Box className="flex flex-col min-h-30 gap-4">
108-
<Text variant={TextVariant.HeadingLg} className="text-center my-2">
102+
<Box className="flex flex-col min-h-30 gap-4 flex-1 justify-end">
103+
<img
104+
src="/images/rewards/rewards-onboarding-step4.png"
105+
className="z-10 object-contain self-center my-4"
106+
width={100}
107+
height={100}
108+
alt={t('rewardsOnboardingStep4Title')}
109+
/>
110+
<Text variant={TextVariant.HeadingLg} className="text-center">
109111
{t('rewardsOnboardingStep4Title')}
110112
</Text>
111113
<Text
@@ -157,11 +159,12 @@ const OnboardingStep4: React.FC = () => {
157159
* Renders the action buttons section
158160
*/
159161
const renderActions = () => (
160-
<Box className="flex flex-col justify-end flex-1 mb-2">
162+
<Box className="flex flex-col justify-end my-2">
161163
<Button
164+
variant={ButtonVariant.Primary}
162165
size={ButtonSize.Lg}
163166
onClick={handleNext}
164-
className="w-full bg-white my-2"
167+
className="w-full my-2"
165168
>
166169
{t('rewardsOnboardingStepOptIn')}
167170
</Button>
@@ -209,6 +212,9 @@ const OnboardingStep4: React.FC = () => {
209212

210213
return (
211214
<ModalBody className="w-full h-full pt-8 pb-4 flex flex-col">
215+
{/* Progress Indicator */}
216+
<ProgressIndicator totalSteps={4} currentStep={4} />
217+
212218
{/* Error Section */}
213219
{optinError && (
214220
<RewardsErrorBanner
@@ -217,9 +223,6 @@ const OnboardingStep4: React.FC = () => {
217223
/>
218224
)}
219225

220-
{/* Image Section */}
221-
{renderStepImage()}
222-
223226
{/* Title Section */}
224227
{renderStepInfo()}
225228

0 commit comments

Comments
 (0)