Skip to content

Commit 3dcdb99

Browse files
MayankBansal12MayankBansal12
committed
feat: add thank you screen for new stepper
1 parent 3381545 commit 3dcdb99

5 files changed

Lines changed: 294 additions & 177 deletions

File tree

‎app/components/new-join-steps/thank-you-screen.hbs‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<div class="thank-you-screen" data-test="thank-you-screen">
2+
<div class="thank-you-screen__logo" data-test="thank-you-logo">
3+
<FaIcon @icon="check" @size="2x" />
4+
</div>
5+
6+
<div class="form-header__text">
7+
<h1 class="section-heading">{{@firstName}}, thank you for applying to RDS.</h1>
8+
<p class="section-instruction">Great work filling up the application. However, it takes more to join us early.</p>
9+
</div>
10+
11+
<div class="thank-you-screen__info-container">
12+
<div class="thank-you-screen__info-item--bullet">
13+
Head over to Application Tracking Page.
14+
</div>
15+
16+
<div class="thank-you-screen__info-item--bullet">
17+
Checkout AI review and and edit your application to improve application rank.
18+
</div>
19+
20+
<div class="thank-you-screen__info-item--bullet">
21+
Complete quests to improve your ranking and increase your chances of early reviews.
22+
</div>
23+
</div>
24+
25+
<div class="application-id">
26+
<h3>Application ID</h3>
27+
<p>{{@applicationId}}</p>
28+
</div>
29+
30+
<div class="thank-you-screen__actions">
31+
<Reusables::Button @text="Track application" @variant="dark" @test="track-application" @type="button" />
32+
</div>
33+
</div>

‎app/components/new-stepper.hbs‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<section class='stepper' data-test="stepper">
22

3-
{{#if (not-eq this.currentStep this.MIN_STEP)}}
3+
{{#if (and (not-eq this.currentStep this.MIN_STEP) (not-eq this.currentStep 7))}}
44
<NewJoinSteps::StepperHeader
55
@heading={{this.currentHeading}}
66
@subheading={{this.currentSubheading}}
@@ -74,10 +74,17 @@
7474
@navigateToStep={{this.navigateToStep}}
7575
@onSubmit={{this.handleSubmit}}
7676
/>
77+
78+
{{else if (eq this.currentStep 7)}}
79+
<NewJoinSteps::ThankYouScreen
80+
@firstName={{this.firstName}}
81+
@applicationId={{this.applicationId}}
82+
@onTrackApplication={{this.handleTrackApplication}}
83+
/>
7784
{{/if}}
7885
</form>
7986

80-
{{#if (not-eq this.currentStep this.MIN_STEP)}}
87+
{{#if (and (not-eq this.currentStep this.MIN_STEP) (not-eq this.currentStep 7))}}
8188
<div class="new-stepper__buttons">
8289
{{#if this.showPreviousButton}}
8390
<Reusables::Button

‎app/components/new-stepper.js‎

Lines changed: 35 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -3,45 +3,34 @@ import { tracked } from '@glimmer/tracking';
33
import { action } from '@ember/object';
44
import { inject as service } from '@ember/service';
55
import { NEW_FORM_STEPS } from '../constants/new-join-form';
6+
import { getLocalStorageItem, setLocalStorageItem } from '../../utils/storage';
67

78
export default class NewStepperComponent extends Component {
89
MIN_STEP = 0;
910
MAX_STEP = 6;
11+
applicationId = '4gchuf690';
1012

1113
@service login;
1214
@service router;
1315
@service onboarding;
1416
@service applicationTerms;
1517

16-
@tracked currentStep = +(
17-
localStorage.getItem('currentStep') ??
18-
this.args.step ??
19-
0
20-
);
18+
@tracked currentStep =
19+
Number(getLocalStorageItem('currentStep') ?? this.args.step) || 0;
2120
@tracked preValid = false;
2221
@tracked isValid = localStorage.getItem('isValid') === 'true';
2322

2423
setIsValid = (newVal) => (this.isValid = newVal);
2524
setIsPreValid = (newVal) => (this.preValid = newVal);
2625

27-
constructor() {
28-
super(...arguments);
29-
30-
this.handlePopState = () => {
31-
const step = new URLSearchParams(window.location.search).get('step');
32-
if (step !== null) {
33-
this.isValid = false;
34-
this.preValid = false;
35-
this.currentStep = Number(step);
36-
localStorage.setItem('isValid', false);
37-
}
38-
};
39-
window.addEventListener('popstate', this.handlePopState);
40-
}
41-
42-
willDestroy() {
43-
super.willDestroy(...arguments);
44-
window.removeEventListener('popstate', this.handlePopState);
26+
updateQueryParam(step) {
27+
const existingQueryParams = this.router.currentRoute?.queryParams;
28+
this.router.transitionTo('join', {
29+
queryParams: {
30+
...existingQueryParams,
31+
step,
32+
},
33+
});
4534
}
4635

4736
get showPreviousButton() {
@@ -56,38 +45,32 @@ export default class NewStepperComponent extends Component {
5645
return NEW_FORM_STEPS.subheadings[this.currentStep - 1] ?? '';
5746
}
5847

48+
get firstName() {
49+
return localStorage.getItem('first_name') ?? '';
50+
}
51+
5952
@action incrementStep() {
6053
if (this.currentStep < this.MAX_STEP) {
61-
this.isValid = false;
62-
this.preValid = false;
63-
this.currentStep += 1;
64-
65-
localStorage.setItem('currentStep', this.currentStep);
66-
localStorage.setItem('isValid', false);
67-
this.router.transitionTo({
68-
queryParams: { dev: true, step: this.currentStep },
69-
});
54+
const nextStep = this.currentStep + 1;
55+
setLocalStorageItem('currentStep', String(nextStep));
56+
this.currentStep = nextStep;
57+
this.updateQueryParam(nextStep);
7058
}
7159
}
7260

7361
@action decrementStep() {
7462
if (this.currentStep > this.MIN_STEP) {
75-
this.isValid = false;
76-
this.preValid = false;
77-
this.currentStep -= 1;
78-
79-
localStorage.setItem('currentStep', this.currentStep);
80-
localStorage.setItem('isValid', false);
81-
this.router.transitionTo({
82-
queryParams: { dev: true, step: this.currentStep },
83-
});
63+
const previousStep = this.currentStep - 1;
64+
setLocalStorageItem('currentStep', String(previousStep));
65+
this.currentStep = previousStep;
66+
this.updateQueryParam(previousStep);
8467
}
8568
}
8669

8770
@action startHandler() {
88-
localStorage.setItem('id', this.login.userData.id);
89-
localStorage.setItem('first_name', this.login.userData.first_name);
90-
localStorage.setItem('last_name', this.login.userData.last_name);
71+
sessionStorage.setItem('id', this.login.userData.id);
72+
sessionStorage.setItem('first_name', this.login.userData.first_name);
73+
sessionStorage.setItem('last_name', this.login.userData.last_name);
9174
this.incrementStep();
9275
}
9376

@@ -96,16 +79,17 @@ export default class NewStepperComponent extends Component {
9679
this.isValid = false;
9780
this.preValid = false;
9881
this.currentStep = stepNumber;
99-
localStorage.setItem('currentStep', this.currentStep);
100-
localStorage.setItem('isValid', false);
101-
this.router.transitionTo({
102-
queryParams: { dev: true, step: this.currentStep },
103-
});
82+
setLocalStorageItem('currentStep', String(stepNumber));
83+
setLocalStorageItem('isValid', 'false');
84+
this.updateQueryParam(stepNumber);
10485
}
10586
}
10687

107-
// handle create application using this action
10888
@action handleSubmit() {
109-
console.log('Submit review');
89+
// ToDo: handle create application
90+
console.log('Submit application for review');
91+
this.currentStep = this.MAX_STEP + 1;
92+
setLocalStorageItem('currentStep', String(this.currentStep));
93+
this.updateQueryParam(this.currentStep);
11094
}
11195
}

0 commit comments

Comments
 (0)