Skip to content

Commit fdce397

Browse files
crisnicandreicrisnicandrei
committed
Add skip step buttons to onboarding
1 parent 5cf5f3c commit fdce397

File tree

9 files changed

+147
-36
lines changed

9 files changed

+147
-36
lines changed

‎src/app/onboarding/components/glam/glam-goals-screen/glam-goals-screen.component.html‎

Lines changed: 29 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -22,26 +22,40 @@
2222
</div>
2323
}
2424
</div>
25+
2526
<div class="buttons">
26-
<div class="back-button">
27+
<div class="skip-step-button">
2728
<pr-button
28-
(buttonClick)="backToNameArchive()"
29-
[size]="'fill'"
30-
[icon]="'onboarding/back'"
31-
[style]="{ 'justify-content': 'center' }"
32-
>Back</pr-button
33-
>
34-
</div>
35-
<div class="next-button">
36-
<pr-button
37-
(buttonClick)="goToNextReasons()"
29+
(buttonClick)="skipStep()"
30+
[icon]="'onboarding/back-reverse'"
3831
[orientation]="'right'"
39-
[icon]="'onboarding/arrow-right'"
40-
[variant]="'secondary'"
32+
[style]="{ 'justify-content': 'center', border: 'none' }"
4133
[size]="'fill'"
42-
[style]="{ 'justify-content': 'center' }"
43-
>Next</pr-button
34+
>Skip this step</pr-button
4435
>
4536
</div>
37+
<div class="action-buttons">
38+
<div class="back-button">
39+
<pr-button
40+
(buttonClick)="backToNameArchive()"
41+
[size]="'fill'"
42+
[icon]="'onboarding/back'"
43+
[style]="{ 'justify-content': 'center' }"
44+
>Back</pr-button
45+
>
46+
</div>
47+
<div class="next-button">
48+
<pr-button
49+
(buttonClick)="goToNextReasons()"
50+
[orientation]="'right'"
51+
[icon]="'onboarding/arrow-right'"
52+
[variant]="'secondary'"
53+
[size]="'fill'"
54+
[style]="{ 'justify-content': 'center' }"
55+
[disabled]="!selectedGoals.length"
56+
>Next</pr-button
57+
>
58+
</div>
59+
</div>
4660
</div>
4761
</div>

‎src/app/onboarding/components/glam/glam-goals-screen/glam-goals-screen.component.scss‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -77,15 +77,21 @@ p {
7777
.buttons {
7878
display: flex;
7979
flex-direction: row;
80-
justify-content: flex-end;
80+
justify-content: space-between;
8181
gap: 32px;
8282
margin-top: 24px;
8383

84-
@media (max-width: 768px) {
85-
justify-content: space-between;
84+
@media (max-width: 1062px) {
85+
flex-direction: column;
86+
gap: 2rem;
8687
}
8788
}
8889

90+
.action-buttons {
91+
display: flex;
92+
gap: 40px;
93+
}
94+
8995
.goal-container {
9096
@media (max-width: 768px) {
9197
display: flex;

‎src/app/onboarding/components/glam/glam-goals-screen/glam-goals-screen.component.spec.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,4 +89,29 @@ describe('GlamGoalsScreenComponent', () => {
8989
goals: ['Mock Goal', goal],
9090
});
9191
});
92+
93+
it('should clear selectedGoals and update sessionStorage when skipStep is called', async () => {
94+
const { instance } = await shallow.render();
95+
96+
expect(instance.selectedGoals).toEqual(['Mock Goal']);
97+
98+
instance.skipStep();
99+
100+
expect(instance.selectedGoals).toEqual([]);
101+
expect(sessionStorage.setItem).toHaveBeenCalledWith(
102+
'goals',
103+
JSON.stringify([]),
104+
);
105+
});
106+
107+
it('should emit goalsOutput with empty goals when skipStep is called', async () => {
108+
const { instance, outputs } = await shallow.render();
109+
110+
instance.skipStep();
111+
112+
expect(outputs.goalsOutput.emit).toHaveBeenCalledWith({
113+
screen: 'reasons',
114+
goals: [],
115+
});
116+
});
92117
});

‎src/app/onboarding/components/glam/glam-goals-screen/glam-goals-screen.component.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,4 +50,13 @@ export class GlamGoalsScreenComponent implements OnInit {
5050
}
5151
sessionStorage.setItem('goals', JSON.stringify(this.selectedGoals));
5252
}
53+
54+
public skipStep(): void {
55+
this.selectedGoals = [];
56+
sessionStorage.setItem('goals', JSON.stringify([]));
57+
this.goalsOutput.emit({
58+
screen: 'reasons',
59+
goals: [],
60+
});
61+
}
5362
}

‎src/app/onboarding/components/glam/glam-reasons-screen/glam-reasons-screen.component.html‎

Lines changed: 28 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -21,25 +21,38 @@
2121
}
2222
</div>
2323
<div class="buttons">
24-
<div class="back-button">
24+
<div class="skip-step-button">
2525
<pr-button
26-
(buttonClick)="backToGoals()"
27-
[size]="'fill'"
28-
[icon]="'onboarding/back'"
29-
[style]="{ 'justify-content': 'center' }"
30-
>Back</pr-button
31-
>
32-
</div>
33-
<div class="next-button">
34-
<pr-button
35-
(buttonClick)="finalizeArchive()"
26+
(buttonClick)="skipStep()"
27+
[icon]="'onboarding/back-reverse'"
3628
[orientation]="'right'"
37-
[icon]="'onboarding/arrow-right'"
29+
[style]="{ 'justify-content': 'center', border: 'none' }"
3830
[size]="'fill'"
39-
[variant]="'secondary'"
40-
[style]="{ 'justify-content': 'center' }"
41-
>Next</pr-button
31+
>Skip this step</pr-button
4232
>
4333
</div>
34+
<div class="action-buttons">
35+
<div class="back-button">
36+
<pr-button
37+
(buttonClick)="backToGoals()"
38+
[size]="'fill'"
39+
[icon]="'onboarding/back'"
40+
[style]="{ 'justify-content': 'center' }"
41+
>Back</pr-button
42+
>
43+
</div>
44+
<div class="next-button">
45+
<pr-button
46+
(buttonClick)="finalizeArchive()"
47+
[orientation]="'right'"
48+
[icon]="'onboarding/arrow-right'"
49+
[size]="'fill'"
50+
[variant]="'secondary'"
51+
[style]="{ 'justify-content': 'center' }"
52+
[disabled]="!selectedReasons.length"
53+
>Next</pr-button
54+
>
55+
</div>
56+
</div>
4457
</div>
4558
</div>

‎src/app/onboarding/components/glam/glam-reasons-screen/glam-reasons-screen.component.scss‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,11 @@
2424
}
2525
}
2626

27+
.action-buttons {
28+
display: flex;
29+
gap: 40px;
30+
}
31+
2732
.what-is-important {
2833
font-family: 'UsualLight', sans-serif;
2934
font-size: 56px;
@@ -69,12 +74,14 @@ p {
6974
.buttons {
7075
display: flex;
7176
flex-direction: row;
72-
justify-content: flex-end;
77+
justify-content: space-between;
78+
7379
gap: 16px;
7480
padding-bottom: 100px;
7581

76-
@media (max-width: 768px) {
77-
justify-content: space-between;
82+
@media (max-width: 1062px) {
83+
flex-direction: column;
84+
gap: 2rem;
7885
}
7986
}
8087

‎src/app/onboarding/components/glam/glam-reasons-screen/glam-reasons-screen.component.spec.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,4 +91,29 @@ describe('GlamReasonsScreenComponent', () => {
9191
reasons: ['Mock Reason', reason],
9292
});
9393
});
94+
95+
it('should clear selectedReasons and update sessionStorage when skipStep is called', async () => {
96+
const { instance } = await shallow.render();
97+
98+
expect(instance.selectedReasons).toEqual(['Mock Reason']);
99+
100+
instance.skipStep();
101+
102+
expect(instance.selectedReasons).toEqual([]);
103+
expect(sessionStorage.setItem).toHaveBeenCalledWith(
104+
'reasons',
105+
JSON.stringify([]),
106+
);
107+
});
108+
109+
it('should emit reasonOutput with empty reasons when skipStep is called', async () => {
110+
const { instance, outputs } = await shallow.render();
111+
112+
instance.skipStep();
113+
114+
expect(outputs.reasonsEmit.emit).toHaveBeenCalledWith({
115+
screen: 'finalize',
116+
reasons: [],
117+
});
118+
});
94119
});

‎src/app/onboarding/components/glam/glam-reasons-screen/glam-reasons-screen.component.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,4 +49,13 @@ export class GlamReasonsScreenComponent implements OnInit {
4949
}
5050
sessionStorage.setItem('reasons', JSON.stringify(this.selectedReasons));
5151
}
52+
53+
public skipStep(): void {
54+
this.selectedReasons = [];
55+
sessionStorage.setItem('reasons', JSON.stringify([]));
56+
this.reasonsEmit.emit({
57+
screen: 'finalize',
58+
reasons: [],
59+
});
60+
}
5261
}

‎src/assets/svg/onboarding/back-reverse.svg‎

Lines changed: 3 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)