Skip to content

Commit 195b14c

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

9 files changed

+202
-91
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: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -75,15 +75,21 @@ p {
7575
}
7676

7777
.buttons {
78-
display: flex;
79-
flex-direction: row;
80-
justify-content: flex-end;
81-
gap: 32px;
82-
margin-top: 24px;
78+
display: flex;
79+
flex-direction: row;
80+
justify-content: space-between;
81+
gap: 32px;
82+
margin-top: 24px;
83+
84+
@media (max-width: 1062px) {
85+
flex-direction: column;
86+
gap: 2rem;
87+
}
88+
}
8389

84-
@media (max-width: 768px) {
85-
justify-content: space-between;
86-
}
90+
.action-buttons {
91+
display: flex;
92+
gap: 40px;
8793
}
8894

8995
.goal-container {

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

Lines changed: 30 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -84,9 +84,34 @@ describe('GlamGoalsScreenComponent', () => {
8484
instance.addGoal(goal);
8585
instance.goToNextReasons();
8686

87-
expect(outputs.goalsOutput.emit).toHaveBeenCalledWith({
88-
screen: 'reasons',
89-
goals: ['Mock Goal', goal],
90-
});
91-
});
87+
expect(outputs.goalsOutput.emit).toHaveBeenCalledWith({
88+
screen: 'reasons',
89+
goals: ['Mock Goal', goal],
90+
});
91+
});
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: 55 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,58 @@
11
<!-- @format -->
22
<div class="reasons-screen">
3-
<div class="text-container">
4-
<p class="what-is-important">
5-
Tell us what's <b class="bold">important</b> to you
6-
</p>
7-
<p class="text">
8-
Finally, we’re curious... <br /><b>What brought you to Permanent.org?</b>
9-
</p>
10-
</div>
11-
<div class="reasons">
12-
@for (item of reasons; track $index) {
13-
<div class="reason-container">
14-
<pr-glam-user-survey-square
15-
[text]="item.text"
16-
[tag]="item.tag"
17-
[selected]="selectedReasons.includes(item.tag)"
18-
(selectedChange)="addReason(item.tag)"
19-
></pr-glam-user-survey-square>
20-
</div>
21-
}
22-
</div>
23-
<div class="buttons">
24-
<div class="back-button">
25-
<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()"
36-
[orientation]="'right'"
37-
[icon]="'onboarding/arrow-right'"
38-
[size]="'fill'"
39-
[variant]="'secondary'"
40-
[style]="{ 'justify-content': 'center' }"
41-
>Next</pr-button
42-
>
43-
</div>
44-
</div>
3+
<div class="text-container">
4+
<p class="what-is-important">
5+
Tell us what's <b class="bold">important</b> to you
6+
</p>
7+
<p class="text">
8+
Finally, we’re curious... <br /><b>What brought you to Permanent.org?</b>
9+
</p>
10+
</div>
11+
<div class="reasons">
12+
@for (item of reasons; track $index) {
13+
<div class="reason-container">
14+
<pr-glam-user-survey-square
15+
[text]="item.text"
16+
[tag]="item.tag"
17+
[selected]="selectedReasons.includes(item.tag)"
18+
(selectedChange)="addReason(item.tag)"
19+
></pr-glam-user-survey-square>
20+
</div>
21+
}
22+
</div>
23+
<div class="buttons">
24+
<div class="skip-step-button">
25+
<pr-button
26+
(buttonClick)="skipStep()"
27+
[icon]="'onboarding/back-reverse'"
28+
[orientation]="'right'"
29+
[style]="{ 'justify-content': 'center', border: 'none' }"
30+
[size]="'fill'"
31+
>Skip this step</pr-button
32+
>
33+
</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>
57+
</div>
4558
</div>

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

Lines changed: 15 additions & 8 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;
@@ -67,15 +72,17 @@ p {
6772
}
6873

6974
.buttons {
70-
display: flex;
71-
flex-direction: row;
72-
justify-content: flex-end;
73-
gap: 16px;
74-
padding-bottom: 100px;
75+
display: flex;
76+
flex-direction: row;
77+
justify-content: space-between;
7578

76-
@media (max-width: 768px) {
77-
justify-content: space-between;
78-
}
79+
gap: 16px;
80+
padding-bottom: 100px;
81+
82+
@media (max-width: 1062px) {
83+
flex-direction: column;
84+
gap: 2rem;
85+
}
7986
}
8087

8188
.reason-container {

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

Lines changed: 30 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -86,9 +86,34 @@ describe('GlamReasonsScreenComponent', () => {
8686
instance.addReason(reason);
8787
instance.backToGoals();
8888

89-
expect(outputs.reasonsEmit.emit).toHaveBeenCalledWith({
90-
screen: 'goals',
91-
reasons: ['Mock Reason', reason],
92-
});
93-
});
89+
expect(outputs.reasonsEmit.emit).toHaveBeenCalledWith({
90+
screen: 'goals',
91+
reasons: ['Mock Reason', reason],
92+
});
93+
});
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: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -41,12 +41,21 @@ export class GlamReasonsScreenComponent implements OnInit {
4141
});
4242
}
4343

44-
public addReason(reason: string): void {
45-
if (this.selectedReasons.includes(reason)) {
46-
this.selectedReasons = this.selectedReasons.filter((r) => r !== reason);
47-
} else {
48-
this.selectedReasons.push(reason);
49-
}
50-
sessionStorage.setItem('reasons', JSON.stringify(this.selectedReasons));
51-
}
44+
public addReason(reason: string): void {
45+
if (this.selectedReasons.includes(reason)) {
46+
this.selectedReasons = this.selectedReasons.filter((r) => r !== reason);
47+
} else {
48+
this.selectedReasons.push(reason);
49+
}
50+
sessionStorage.setItem('reasons', JSON.stringify(this.selectedReasons));
51+
}
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)