From 0fd986f35ca37d8ee30d6a375f2a26de4b35dd00 Mon Sep 17 00:00:00 2001 From: Mayank Bansal Date: Wed, 5 Nov 2025 03:43:08 +0530 Subject: [PATCH 1/6] feat: add new step for social links --- .../new-join-steps/new-step-four.hbs | 116 ++++++++++++++++++ .../new-join-steps/new-step-four.js | 46 +++++++ app/components/new-stepper.hbs | 9 ++ app/constants/new-join-form.js | 12 ++ 4 files changed, 183 insertions(+) create mode 100644 app/components/new-join-steps/new-step-four.hbs create mode 100644 app/components/new-join-steps/new-step-four.js diff --git a/app/components/new-join-steps/new-step-four.hbs b/app/components/new-join-steps/new-step-four.hbs new file mode 100644 index 00000000..0d0367fa --- /dev/null +++ b/app/components/new-join-steps/new-step-four.hbs @@ -0,0 +1,116 @@ +
+
+

{{@heading}}

+

{{@subHeading}}

+
+ + + {{#if this.errorMessage.phoneNumber}} +
{{this.errorMessage.phoneNumber}}
+ {{/if}} + + + {{#if this.errorMessage.twitter}} +
{{this.errorMessage.twitter}}
+ {{/if}} + + {{#if this.showGitHub}} + + {{#if this.errorMessage.github}} +
{{this.errorMessage.github}}
+ {{/if}} + {{/if}} + + + {{#if this.errorMessage.linkedin}} +
{{this.errorMessage.linkedin}}
+ {{/if}} + + + {{#if this.errorMessage.instagram}} +
{{this.errorMessage.instagram}}
+ {{/if}} + + + {{#if this.errorMessage.peerlist}} +
{{this.errorMessage.peerlist}}
+ {{/if}} + + {{#if this.showBehance}} + + {{#if this.errorMessage.behance}} +
{{this.errorMessage.behance}}
+ {{/if}} + {{/if}} + + {{#if this.showDribble}} + + {{#if this.errorMessage.dribble}} +
{{this.errorMessage.dribble}}
+ {{/if}} + {{/if}} +
diff --git a/app/components/new-join-steps/new-step-four.js b/app/components/new-join-steps/new-step-four.js new file mode 100644 index 00000000..39b427b3 --- /dev/null +++ b/app/components/new-join-steps/new-step-four.js @@ -0,0 +1,46 @@ +import BaseStepComponent from './base-step'; +import { NEW_STEP_LIMITS } from '../../constants/new-join-form'; + +export default class NewStepFourComponent extends BaseStepComponent { + storageKey = 'newStepFourData'; + + get userRole() { + const stepOneData = JSON.parse( + localStorage.getItem('newStepOneData') || '{}', + ); + return stepOneData.role || ''; + } + + get validationMap() { + const baseMap = { + phoneNumber: NEW_STEP_LIMITS.stepFour.phoneNumber, + twitter: NEW_STEP_LIMITS.stepFour.twitter, + linkedin: NEW_STEP_LIMITS.stepFour.linkedin, + instagram: NEW_STEP_LIMITS.stepFour.instagram, + peerlist: NEW_STEP_LIMITS.stepFour.peerlist, + }; + + if (this.userRole === 'Developer') { + baseMap.github = NEW_STEP_LIMITS.stepFour.github; + } + + if (this.userRole === 'Designer') { + baseMap.behance = NEW_STEP_LIMITS.stepFour.behance; + baseMap.dribble = NEW_STEP_LIMITS.stepFour.dribble; + } + + return baseMap; + } + + get showGitHub() { + return this.userRole === 'Developer'; + } + + get showBehance() { + return this.userRole === 'Designer'; + } + + get showDribble() { + return this.userRole === 'Designer'; + } +} diff --git a/app/components/new-stepper.hbs b/app/components/new-stepper.hbs index ecb753fd..e49a0976 100644 --- a/app/components/new-stepper.hbs +++ b/app/components/new-stepper.hbs @@ -48,6 +48,15 @@ @heading={{this.currentHeading}} @subHeading={{this.currentSubheading}} /> + + {{else if (eq this.currentStep 4)}} + {{/if}} diff --git a/app/constants/new-join-form.js b/app/constants/new-join-form.js index 5c1aadcd..e59fb781 100644 --- a/app/constants/new-join-form.js +++ b/app/constants/new-join-form.js @@ -3,11 +3,13 @@ export const NEW_FORM_STEPS = { 'Upload Professional Headshot and Complete Personal Details', 'Additional Personal Information', 'Your hobbies, interests, fun fact', + 'Connect your social profiles', ], subheadings: [ 'Please provide accurate information for verification purposes.', 'Introduce and help us get to know you better', 'Show us your funny and interesting side', + 'Share your social media and professional profiles', ], }; @@ -36,6 +38,16 @@ export const NEW_STEP_LIMITS = { hobbies: { min: 100, max: 500 }, funFact: { min: 100, max: 500 }, }, + stepFour: { + phoneNumber: { min: 1 }, + twitter: { min: 1 }, + github: { min: 1 }, + linkedin: { min: 1 }, + instagram: {}, + peerlist: { min: 1 }, + behance: { min: 1 }, + dribble: { min: 1 }, + }, }; export const STEP_DATA_STORAGE_KEY = { From cd7db59ffeaf2e4fdc07d5bfa8b99d15fdc67e6f Mon Sep 17 00:00:00 2001 From: Mayank Bansal Date: Wed, 5 Nov 2025 04:28:15 +0530 Subject: [PATCH 2/6] feat: add snew step four for social links --- .../new-join-steps/new-step-four.hbs | 10 +++- .../new-join-steps/new-step-four.js | 57 ++++++++++++++----- app/constants/new-join-form.js | 2 +- app/utils/validator.js | 2 +- 4 files changed, 55 insertions(+), 16 deletions(-) diff --git a/app/components/new-join-steps/new-step-four.hbs b/app/components/new-join-steps/new-step-four.hbs index 0d0367fa..27a6d96f 100644 --- a/app/components/new-join-steps/new-step-four.hbs +++ b/app/components/new-join-steps/new-step-four.hbs @@ -8,10 +8,11 @@ @field='Phone Number' @name='phoneNumber' @placeHolder='+91 80000 00000' - @type='text' + @type='tel' @required={{true}} @value={{this.data.phoneNumber}} @onInput={{this.inputHandler}} + @variant='input--full-width' /> {{#if this.errorMessage.phoneNumber}}
{{this.errorMessage.phoneNumber}}
@@ -25,6 +26,7 @@ @required={{true}} @value={{this.data.twitter}} @onInput={{this.inputHandler}} + @variant='input--full-width' /> {{#if this.errorMessage.twitter}}
{{this.errorMessage.twitter}}
@@ -39,6 +41,7 @@ @required={{true}} @value={{this.data.github}} @onInput={{this.inputHandler}} + @variant='input--full-width' /> {{#if this.errorMessage.github}}
{{this.errorMessage.github}}
@@ -53,6 +56,7 @@ @required={{true}} @value={{this.data.linkedin}} @onInput={{this.inputHandler}} + @variant='input--full-width' /> {{#if this.errorMessage.linkedin}}
{{this.errorMessage.linkedin}}
@@ -66,6 +70,7 @@ @required={{false}} @value={{this.data.instagram}} @onInput={{this.inputHandler}} + @variant='input--full-width' /> {{#if this.errorMessage.instagram}}
{{this.errorMessage.instagram}}
@@ -79,6 +84,7 @@ @required={{true}} @value={{this.data.peerlist}} @onInput={{this.inputHandler}} + @variant='input--full-width' /> {{#if this.errorMessage.peerlist}}
{{this.errorMessage.peerlist}}
@@ -93,6 +99,7 @@ @required={{true}} @value={{this.data.behance}} @onInput={{this.inputHandler}} + @variant='input--full-width' /> {{#if this.errorMessage.behance}}
{{this.errorMessage.behance}}
@@ -108,6 +115,7 @@ @required={{true}} @value={{this.data.dribble}} @onInput={{this.inputHandler}} + @variant='input--full-width' /> {{#if this.errorMessage.dribble}}
{{this.errorMessage.dribble}}
diff --git a/app/components/new-join-steps/new-step-four.js b/app/components/new-join-steps/new-step-four.js index 39b427b3..5dff623a 100644 --- a/app/components/new-join-steps/new-step-four.js +++ b/app/components/new-join-steps/new-step-four.js @@ -1,9 +1,18 @@ import BaseStepComponent from './base-step'; import { NEW_STEP_LIMITS } from '../../constants/new-join-form'; +import { phoneNumberRegex } from '../../constants/regex'; export default class NewStepFourComponent extends BaseStepComponent { storageKey = 'newStepFourData'; + validationMap = { + phoneNumber: NEW_STEP_LIMITS.stepFour.phoneNumber, + twitter: NEW_STEP_LIMITS.stepFour.twitter, + linkedin: NEW_STEP_LIMITS.stepFour.linkedin, + instagram: NEW_STEP_LIMITS.stepFour.instagram, + peerlist: NEW_STEP_LIMITS.stepFour.peerlist, + }; + get userRole() { const stepOneData = JSON.parse( localStorage.getItem('newStepOneData') || '{}', @@ -11,25 +20,27 @@ export default class NewStepFourComponent extends BaseStepComponent { return stepOneData.role || ''; } - get validationMap() { - const baseMap = { - phoneNumber: NEW_STEP_LIMITS.stepFour.phoneNumber, - twitter: NEW_STEP_LIMITS.stepFour.twitter, - linkedin: NEW_STEP_LIMITS.stepFour.linkedin, - instagram: NEW_STEP_LIMITS.stepFour.instagram, - peerlist: NEW_STEP_LIMITS.stepFour.peerlist, - }; - + postLoadInitialize() { if (this.userRole === 'Developer') { - baseMap.github = NEW_STEP_LIMITS.stepFour.github; + this.validationMap.github = NEW_STEP_LIMITS.stepFour.github; } if (this.userRole === 'Designer') { - baseMap.behance = NEW_STEP_LIMITS.stepFour.behance; - baseMap.dribble = NEW_STEP_LIMITS.stepFour.dribble; + this.validationMap.behance = NEW_STEP_LIMITS.stepFour.behance; + this.validationMap.dribble = NEW_STEP_LIMITS.stepFour.dribble; } - return baseMap; + // re-calculate the errorMessage and wordCount for new input fields + this.errorMessage = Object.fromEntries( + Object.keys(this.validationMap).map((k) => [k, '']), + ); + + this.wordCount = Object.fromEntries( + Object.keys(this.validationMap).map((k) => { + let val = this.data[k] || ''; + return [k, val.trim().split(/\s+/).filter(Boolean).length || 0]; + }), + ); } get showGitHub() { @@ -43,4 +54,24 @@ export default class NewStepFourComponent extends BaseStepComponent { get showDribble() { return this.userRole === 'Designer'; } + + validateField(field, value) { + if (field === 'phoneNumber') { + const trimmedValue = value?.trim() || ''; + const isValid = trimmedValue && phoneNumberRegex.test(trimmedValue); + return { + isValid, + wordCount: 0, + }; + } + return super.validateField(field, value); + } + + formatError(field, result) { + if (field === 'phoneNumber') { + if (result.isValid) return ''; + return 'Please enter a valid phone number (e.g., +91 80000 00000)'; + } + return super.formatError(field, result); + } } diff --git a/app/constants/new-join-form.js b/app/constants/new-join-form.js index e59fb781..a4421183 100644 --- a/app/constants/new-join-form.js +++ b/app/constants/new-join-form.js @@ -43,7 +43,7 @@ export const NEW_STEP_LIMITS = { twitter: { min: 1 }, github: { min: 1 }, linkedin: { min: 1 }, - instagram: {}, + instagram: { min: 0 }, peerlist: { min: 1 }, behance: { min: 1 }, dribble: { min: 1 }, diff --git a/app/utils/validator.js b/app/utils/validator.js index d1cdd428..aa6f8825 100644 --- a/app/utils/validator.js +++ b/app/utils/validator.js @@ -19,7 +19,7 @@ export const validateWordCount = (text, wordLimits) => { const wordCount = trimmedText?.split(/\s+/).filter(Boolean).length ?? 0; const { min, max } = wordLimits; - if (!trimmedText) { + if (!trimmedText && min > 0) { return { isValid: false, wordCount: 0, remainingToMin: min }; } From 5fe42207d5e1892a938d960746605e91b66d344b Mon Sep 17 00:00:00 2001 From: Mayank Bansal Date: Wed, 5 Nov 2025 04:46:14 +0530 Subject: [PATCH 3/6] feat: add new step fivve for stepper --- .../new-join-steps/new-step-five.hbs | 45 +++++++++++++++++++ .../new-join-steps/new-step-five.js | 16 +++++++ app/components/new-stepper.hbs | 9 ++++ app/constants/new-join-form.js | 6 +++ 4 files changed, 76 insertions(+) create mode 100644 app/components/new-join-steps/new-step-five.hbs create mode 100644 app/components/new-join-steps/new-step-five.js diff --git a/app/components/new-join-steps/new-step-five.hbs b/app/components/new-join-steps/new-step-five.hbs new file mode 100644 index 00000000..e0f52bbe --- /dev/null +++ b/app/components/new-join-steps/new-step-five.hbs @@ -0,0 +1,45 @@ +
+
+

{{@heading}}

+

{{@subHeading}}

+
+ + +{{#if this.errorMessage.whyRds}} +
{{this.errorMessage.whyRds}}
+{{/if}} + + +{{#if this.errorMessage.numberOfHours}} +
{{this.errorMessage.numberOfHours}}
+{{/if}} + + +{{#if this.errorMessage.foundFrom}} +
{{this.errorMessage.foundFrom}}
+{{/if}} +
\ No newline at end of file diff --git a/app/components/new-join-steps/new-step-five.js b/app/components/new-join-steps/new-step-five.js new file mode 100644 index 00000000..a66b2320 --- /dev/null +++ b/app/components/new-join-steps/new-step-five.js @@ -0,0 +1,16 @@ +import BaseStepComponent from './base-step'; +import { NEW_STEP_LIMITS } from '../../constants/new-join-form'; +import { heardFrom } from '../../constants/social-data'; + +export default class NewStepFiveComponent extends BaseStepComponent { + storageKey = 'newStepFiveData'; + heardFrom = heardFrom; + + validationMap = { + whyRds: NEW_STEP_LIMITS.stepFive.whyRds, + foundFrom: NEW_STEP_LIMITS.stepFive.foundFrom, + }; + maxWords = { + whyRds: NEW_STEP_LIMITS.stepFive.whyRds.max, + }; +} diff --git a/app/components/new-stepper.hbs b/app/components/new-stepper.hbs index e49a0976..810415c6 100644 --- a/app/components/new-stepper.hbs +++ b/app/components/new-stepper.hbs @@ -57,6 +57,15 @@ @heading={{this.currentHeading}} @subHeading={{this.currentSubheading}} /> + + {{else if (eq this.currentStep 5)}} + {{/if}} diff --git a/app/constants/new-join-form.js b/app/constants/new-join-form.js index a4421183..5d7e0e33 100644 --- a/app/constants/new-join-form.js +++ b/app/constants/new-join-form.js @@ -4,12 +4,14 @@ export const NEW_FORM_STEPS = { 'Additional Personal Information', 'Your hobbies, interests, fun fact', 'Connect your social profiles', + 'Why Real Dev Squad?', ], subheadings: [ 'Please provide accurate information for verification purposes.', 'Introduce and help us get to know you better', 'Show us your funny and interesting side', 'Share your social media and professional profiles', + 'Tell us why you want to join our community', ], }; @@ -48,6 +50,10 @@ export const NEW_STEP_LIMITS = { behance: { min: 1 }, dribble: { min: 1 }, }, + stepFive: { + whyRds: { min: 100 }, + foundFrom: { min: 1 }, + }, }; export const STEP_DATA_STORAGE_KEY = { From 24ad300b6b6e72310d51a3245edc8e1cdc91a4ad Mon Sep 17 00:00:00 2001 From: Mayank Bansal Date: Wed, 5 Nov 2025 19:07:30 +0530 Subject: [PATCH 4/6] fix: styling for selectt in new step five --- app/components/new-join-steps/new-step-five.hbs | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/app/components/new-join-steps/new-step-five.hbs b/app/components/new-join-steps/new-step-five.hbs index e0f52bbe..e1089de3 100644 --- a/app/components/new-join-steps/new-step-five.hbs +++ b/app/components/new-join-steps/new-step-five.hbs @@ -16,8 +16,10 @@
{{this.errorMessage.whyRds}}
{{/if}} +
+
{{this.errorMessage.numberOfHours}}
{{/if}} +
+
{{this.errorMessage.foundFrom}}
{{/if}} + + \ No newline at end of file From 14566a3edae8b73150a0775457aded2bd233e1f2 Mon Sep 17 00:00:00 2001 From: Mayank Bansal Date: Mon, 10 Nov 2025 02:40:06 +0530 Subject: [PATCH 5/6] refactor: replace hardcoded storage keys with constants --- .../new-join-steps/new-step-five.hbs | 64 ++++----- .../new-join-steps/new-step-five.js | 12 +- .../new-join-steps/new-step-four.hbs | 128 +++++------------- .../new-join-steps/new-step-four.js | 19 +-- app/constants/new-join-form.js | 2 + 5 files changed, 75 insertions(+), 150 deletions(-) diff --git a/app/components/new-join-steps/new-step-five.hbs b/app/components/new-join-steps/new-step-five.hbs index e1089de3..ded36fdc 100644 --- a/app/components/new-join-steps/new-step-five.hbs +++ b/app/components/new-join-steps/new-step-five.hbs @@ -4,48 +4,30 @@

{{@subHeading}}

- -{{#if this.errorMessage.whyRds}} + + {{#if this.errorMessage.whyRds}}
{{this.errorMessage.whyRds}}
-{{/if}} + {{/if}} -
-
- -{{#if this.errorMessage.numberOfHours}} -
{{this.errorMessage.numberOfHours}}
-{{/if}} -
+
+
+ + {{#if this.errorMessage.numberOfHours}} +
{{this.errorMessage.numberOfHours}}
+ {{/if}} +
-
- -{{#if this.errorMessage.foundFrom}} -
{{this.errorMessage.foundFrom}}
-{{/if}} -
-
+
+ + {{#if this.errorMessage.foundFrom}} +
{{this.errorMessage.foundFrom}}
+ {{/if}} +
+
\ No newline at end of file diff --git a/app/components/new-join-steps/new-step-five.js b/app/components/new-join-steps/new-step-five.js index a66b2320..71a35326 100644 --- a/app/components/new-join-steps/new-step-five.js +++ b/app/components/new-join-steps/new-step-five.js @@ -1,16 +1,16 @@ import BaseStepComponent from './base-step'; -import { NEW_STEP_LIMITS } from '../../constants/new-join-form'; +import { + NEW_STEP_LIMITS, + STEP_DATA_STORAGE_KEY, +} from '../../constants/new-join-form'; import { heardFrom } from '../../constants/social-data'; export default class NewStepFiveComponent extends BaseStepComponent { - storageKey = 'newStepFiveData'; + storageKey = STEP_DATA_STORAGE_KEY.stepFive; heardFrom = heardFrom; - validationMap = { + stepValidation = { whyRds: NEW_STEP_LIMITS.stepFive.whyRds, foundFrom: NEW_STEP_LIMITS.stepFive.foundFrom, }; - maxWords = { - whyRds: NEW_STEP_LIMITS.stepFive.whyRds.max, - }; } diff --git a/app/components/new-join-steps/new-step-four.hbs b/app/components/new-join-steps/new-step-four.hbs index 27a6d96f..40106a44 100644 --- a/app/components/new-join-steps/new-step-four.hbs +++ b/app/components/new-join-steps/new-step-four.hbs @@ -4,121 +4,59 @@

{{@subHeading}}

- + {{#if this.errorMessage.phoneNumber}} -
{{this.errorMessage.phoneNumber}}
+
{{this.errorMessage.phoneNumber}}
{{/if}} - + {{#if this.errorMessage.twitter}} -
{{this.errorMessage.twitter}}
+
{{this.errorMessage.twitter}}
{{/if}} {{#if this.showGitHub}} - - {{#if this.errorMessage.github}} -
{{this.errorMessage.github}}
- {{/if}} + + {{#if this.errorMessage.github}} +
{{this.errorMessage.github}}
+ {{/if}} {{/if}} - + {{#if this.errorMessage.linkedin}} -
{{this.errorMessage.linkedin}}
+
{{this.errorMessage.linkedin}}
{{/if}} - + {{#if this.errorMessage.instagram}} -
{{this.errorMessage.instagram}}
+
{{this.errorMessage.instagram}}
{{/if}} - + {{#if this.errorMessage.peerlist}} -
{{this.errorMessage.peerlist}}
+
{{this.errorMessage.peerlist}}
{{/if}} {{#if this.showBehance}} - - {{#if this.errorMessage.behance}} -
{{this.errorMessage.behance}}
- {{/if}} + + {{#if this.errorMessage.behance}} +
{{this.errorMessage.behance}}
+ {{/if}} {{/if}} {{#if this.showDribble}} - - {{#if this.errorMessage.dribble}} -
{{this.errorMessage.dribble}}
- {{/if}} + + {{#if this.errorMessage.dribble}} +
{{this.errorMessage.dribble}}
+ {{/if}} {{/if}} - + \ No newline at end of file diff --git a/app/components/new-join-steps/new-step-four.js b/app/components/new-join-steps/new-step-four.js index 5dff623a..bae00758 100644 --- a/app/components/new-join-steps/new-step-four.js +++ b/app/components/new-join-steps/new-step-four.js @@ -1,11 +1,14 @@ import BaseStepComponent from './base-step'; -import { NEW_STEP_LIMITS } from '../../constants/new-join-form'; +import { + NEW_STEP_LIMITS, + STEP_DATA_STORAGE_KEY, +} from '../../constants/new-join-form'; import { phoneNumberRegex } from '../../constants/regex'; export default class NewStepFourComponent extends BaseStepComponent { - storageKey = 'newStepFourData'; + storageKey = STEP_DATA_STORAGE_KEY.stepFour; - validationMap = { + stepValidation = { phoneNumber: NEW_STEP_LIMITS.stepFour.phoneNumber, twitter: NEW_STEP_LIMITS.stepFour.twitter, linkedin: NEW_STEP_LIMITS.stepFour.linkedin, @@ -22,21 +25,21 @@ export default class NewStepFourComponent extends BaseStepComponent { postLoadInitialize() { if (this.userRole === 'Developer') { - this.validationMap.github = NEW_STEP_LIMITS.stepFour.github; + this.stepValidation.github = NEW_STEP_LIMITS.stepFour.github; } if (this.userRole === 'Designer') { - this.validationMap.behance = NEW_STEP_LIMITS.stepFour.behance; - this.validationMap.dribble = NEW_STEP_LIMITS.stepFour.dribble; + this.stepValidation.behance = NEW_STEP_LIMITS.stepFour.behance; + this.stepValidation.dribble = NEW_STEP_LIMITS.stepFour.dribble; } // re-calculate the errorMessage and wordCount for new input fields this.errorMessage = Object.fromEntries( - Object.keys(this.validationMap).map((k) => [k, '']), + Object.keys(this.stepValidation).map((k) => [k, '']), ); this.wordCount = Object.fromEntries( - Object.keys(this.validationMap).map((k) => { + Object.keys(this.stepValidation).map((k) => { let val = this.data[k] || ''; return [k, val.trim().split(/\s+/).filter(Boolean).length || 0]; }), diff --git a/app/constants/new-join-form.js b/app/constants/new-join-form.js index 5d7e0e33..11083928 100644 --- a/app/constants/new-join-form.js +++ b/app/constants/new-join-form.js @@ -60,4 +60,6 @@ export const STEP_DATA_STORAGE_KEY = { stepOne: 'newStepOneData', stepTwo: 'newStepTwoData', stepThree: 'newStepThreeData', + stepFour: 'newStepFourData', + stepFive: 'newStepFiveData', }; From 867a28949ad747e6bf17d0f74bd8fa1e0b607a3f Mon Sep 17 00:00:00 2001 From: Mayank Bansal Date: Wed, 12 Nov 2025 02:07:34 +0530 Subject: [PATCH 6/6] feat: add review step for new stepper [Onboarding-Form] (#1087) * feat: add review step for new stepper * feat: add thank you screen for new stepper * refactor: use structure for step data and replace hardcoded storage keys * refactor: use getter func for review step button --- .../new-join-steps/new-step-six.hbs | 207 ++++++++++++++++++ app/components/new-join-steps/new-step-six.js | 57 +++++ .../new-join-steps/thank-you-screen.hbs | 33 +++ app/components/new-stepper.hbs | 68 +++--- app/components/new-stepper.js | 29 ++- app/constants/new-join-form.js | 2 + app/styles/new-stepper.module.css | 54 ++++- 7 files changed, 403 insertions(+), 47 deletions(-) create mode 100644 app/components/new-join-steps/new-step-six.hbs create mode 100644 app/components/new-join-steps/new-step-six.js create mode 100644 app/components/new-join-steps/thank-you-screen.hbs diff --git a/app/components/new-join-steps/new-step-six.hbs b/app/components/new-join-steps/new-step-six.hbs new file mode 100644 index 00000000..cb18d7d5 --- /dev/null +++ b/app/components/new-join-steps/new-step-six.hbs @@ -0,0 +1,207 @@ +
+
+

{{@heading}}

+

{{@subHeading}}

+
+ +
+
+

Personal Information

+ +
+
+
+ Full Name: + + {{if this.stepData.one.fullName this.stepData.one.fullName 'Not provided'}} + +
+
+ Location: + + {{this.locationDisplay}} + +
+
+ Applying as: + + {{if this.stepData.one.role this.stepData.one.role 'Not provided'}} + +
+
+ Profile Image: + + Not uploaded + +
+
+
+ +
+
+

Professional Details

+ +
+
+
+ Skills: + + {{if this.stepData.two.skills this.stepData.two.skills 'Not provided'}} + +
+
+ Institution/Company: + + {{if this.stepData.two.company this.stepData.two.company 'Not provided'}} + +
+
+ Introduction: + + {{if this.stepData.two.introduction this.stepData.two.introduction 'Not provided'}} + +
+
+
+ +
+
+

Hobbies & Interests

+ +
+
+
+ Hobbies: + + {{if this.stepData.three.hobbies this.stepData.three.hobbies 'Not provided'}} + +
+
+ Fun Fact: + + {{if this.stepData.three.funFact this.stepData.three.funFact 'Not provided'}} + +
+
+
+ +
+
+

Social Profiles

+ +
+
+
+ Phone Number: + + {{if this.stepData.four.phoneNumber this.stepData.four.phoneNumber 'Not provided'}} + +
+
+ Twitter: + + {{if this.stepData.four.twitter this.stepData.four.twitter 'Not provided'}} + +
+ {{#if this.showGitHub}} +
+ GitHub: + + {{if this.stepData.four.github this.stepData.four.github 'Not provided'}} + +
+ {{/if}} +
+ LinkedIn: + + {{if this.stepData.four.linkedin this.stepData.four.linkedin 'Not provided'}} + +
+
+ Instagram: + + {{if this.stepData.four.instagram this.stepData.four.instagram 'Not uploaded'}} + +
+
+ Peerlist: + + {{if this.stepData.four.peerlist this.stepData.four.peerlist 'Not provided'}} + +
+ {{#if this.showBehance}} +
+ Behance: + + {{if this.stepData.four.behance this.stepData.four.behance 'Not provided'}} + +
+ {{/if}} + {{#if this.showDribble}} +
+ Dribble: + + {{if this.stepData.four.dribble this.stepData.four.dribble 'Not provided'}} + +
+ {{/if}} +
+
+ +
+
+

Why Real Dev Squad?

+ +
+
+
+ Why you want to join Real Dev Squad?: + + {{if this.stepData.five.whyRds this.stepData.five.whyRds 'Not provided'}} + +
+
+ Hours per week: + + {{if this.stepData.five.numberOfHours this.stepData.five.numberOfHours 'Not provided'}} + +
+
+ How did you hear about us?: + + {{if this.stepData.five.foundFrom this.stepData.five.foundFrom 'Not provided'}} + +
+
+
+
diff --git a/app/components/new-join-steps/new-step-six.js b/app/components/new-join-steps/new-step-six.js new file mode 100644 index 00000000..9928e663 --- /dev/null +++ b/app/components/new-join-steps/new-step-six.js @@ -0,0 +1,57 @@ +import Component from '@glimmer/component'; +import { tracked } from '@glimmer/tracking'; +import { getLocalStorageItem } from '../../utils/storage'; +import { STEP_DATA_STORAGE_KEY } from '../../constants/new-join-form'; + +export default class NewStepSixComponent extends Component { + @tracked stepData = { + one: {}, + two: {}, + three: {}, + four: {}, + five: {}, + }; + + constructor(...args) { + super(...args); + this.loadAllStepData(); + } + + loadAllStepData() { + this.stepData.one = JSON.parse( + getLocalStorageItem(STEP_DATA_STORAGE_KEY.stepOne), + ); + this.stepData.two = JSON.parse( + getLocalStorageItem(STEP_DATA_STORAGE_KEY.stepTwo), + ); + this.stepData.three = JSON.parse( + getLocalStorageItem(STEP_DATA_STORAGE_KEY.stepThree), + ); + this.stepData.four = JSON.parse( + getLocalStorageItem(STEP_DATA_STORAGE_KEY.stepFour), + ); + this.stepData.five = JSON.parse( + getLocalStorageItem(STEP_DATA_STORAGE_KEY.stepFive), + ); + } + + get userRole() { + return this.stepData.one.role || ''; + } + + get showGitHub() { + return this.userRole === 'Developer'; + } + + get showBehance() { + return this.userRole === 'Designer'; + } + + get showDribble() { + return this.userRole === 'Designer'; + } + + get locationDisplay() { + return `${this.stepData.one.city}, ${this.stepData.one.state}, ${this.stepData.one.country}`; + } +} diff --git a/app/components/new-join-steps/thank-you-screen.hbs b/app/components/new-join-steps/thank-you-screen.hbs new file mode 100644 index 00000000..b014fad5 --- /dev/null +++ b/app/components/new-join-steps/thank-you-screen.hbs @@ -0,0 +1,33 @@ +
+ + +
+

{{@firstName}}, thank you for applying to RDS.

+

Great work filling up the application. However, it takes more to join us early.

+
+ +
+
+ Head over to Application Tracking Page. +
+ +
+ Checkout AI review and and edit your application to improve application rank. +
+ +
+ Complete quests to improve your ranking and increase your chances of early reviews. +
+
+ +
+

Application ID

+

{{@applicationId}}

+
+ +
+ +
+
\ No newline at end of file diff --git a/app/components/new-stepper.hbs b/app/components/new-stepper.hbs index 57da598a..f2962269 100644 --- a/app/components/new-stepper.hbs +++ b/app/components/new-stepper.hbs @@ -1,6 +1,5 @@
- - {{#if (not-eq this.currentStep this.MIN_STEP)}} + {{#if (and (not-eq this.currentStep this.MIN_STEP) (not-eq this.currentStep 7))}} {{/if}} @@ -13,57 +12,46 @@ @disabled={{not this.joinApplicationTerms.hasUserAcceptedTerms}} /> - {{else if (eq this.currentStep 1)}} - - {{else if (eq this.currentStep 2)}} - + {{else if (eq this.currentStep 2)}} + + + {{else if (eq this.currentStep 3)}} + + + {{else if (eq this.currentStep 4)}} + + + {{else if (eq this.currentStep 5)}} + - {{else if (eq this.currentStep 3)}} - + {{else if (eq this.currentStep 6)}} + - {{else if (eq this.currentStep 4)}} - - - {{else if (eq this.currentStep 5)}} - + {{else if (eq this.currentStep 7)}} + {{/if}} - {{#if (not-eq this.currentStep this.MIN_STEP)}} + {{#if (and (not-eq this.currentStep this.MIN_STEP) (not-eq this.currentStep 7))}}
{{#if this.showPreviousButton}} {{/if}} - +
{{/if}}
\ No newline at end of file diff --git a/app/components/new-stepper.js b/app/components/new-stepper.js index 919c6803..ff0cc434 100644 --- a/app/components/new-stepper.js +++ b/app/components/new-stepper.js @@ -8,6 +8,7 @@ import { getLocalStorageItem, setLocalStorageItem } from '../utils/storage'; export default class NewStepperComponent extends Component { MIN_STEP = 0; MAX_STEP = 6; + applicationId = '4gchuf690'; @service login; @service router; @@ -36,7 +37,6 @@ export default class NewStepperComponent extends Component { updateQueryParam(step) { const existingQueryParams = this.router.currentRoute?.queryParams; - this.router.transitionTo('join', { queryParams: { ...existingQueryParams, @@ -57,10 +57,18 @@ export default class NewStepperComponent extends Component { return NEW_FORM_STEPS.subheadings[this.currentStep - 1] ?? ''; } + get firstName() { + return localStorage.getItem('first_name') ?? ''; + } + get isNextButtonDisabled() { return !(this.preValid || this.isValid); } + get isReviewStep() { + return this.currentStep === this.MAX_STEP; + } + @action incrementStep() { if (this.currentStep < this.MAX_STEP) { const nextStep = this.currentStep + 1; @@ -85,4 +93,23 @@ export default class NewStepperComponent extends Component { sessionStorage.setItem('last_name', this.login.userData.last_name); this.incrementStep(); } + + @action navigateToStep(stepNumber) { + if (stepNumber >= this.MIN_STEP + 1 && stepNumber <= this.MAX_STEP) { + this.isValid = false; + this.preValid = false; + this.currentStep = stepNumber; + setLocalStorageItem('currentStep', String(stepNumber)); + setLocalStorageItem('isValid', 'false'); + this.updateQueryParam(stepNumber); + } + } + + @action handleSubmit() { + // ToDo: handle create application + console.log('Submit application for review'); + this.currentStep = this.MAX_STEP + 1; + setLocalStorageItem('currentStep', String(this.currentStep)); + this.updateQueryParam(this.currentStep); + } } diff --git a/app/constants/new-join-form.js b/app/constants/new-join-form.js index b600b078..0cfb9fb6 100644 --- a/app/constants/new-join-form.js +++ b/app/constants/new-join-form.js @@ -5,6 +5,7 @@ export const NEW_FORM_STEPS = { 'Your hobbies, interests, fun fact', 'Connect your social profiles', 'Why Real Dev Squad?', + 'Review and Submit', ], subheadings: [ 'Please provide accurate information for verification purposes.', @@ -12,6 +13,7 @@ export const NEW_FORM_STEPS = { 'Show us your funny and interesting side', 'Share your social media and professional profiles', 'Tell us why you want to join our community', + 'Review your answers before submitting.', ], }; diff --git a/app/styles/new-stepper.module.css b/app/styles/new-stepper.module.css index b9da0542..10f1aec8 100644 --- a/app/styles/new-stepper.module.css +++ b/app/styles/new-stepper.module.css @@ -23,7 +23,8 @@ justify-self: end; } -.welcome-screen { +.welcome-screen, +.thank-you-screen { width: 90%; margin: 0 auto 2rem; display: flex; @@ -37,7 +38,8 @@ justify-content: center; } -.welcome-screen__info-item--bullet { +.welcome-screen__info-item--bullet, +.thank-you-screen__info-item--bullet { display: flex; align-items: center; margin-bottom: 1rem; @@ -46,7 +48,8 @@ line-height: 1.5; } -.welcome-screen__info-item--bullet::before { +.welcome-screen__info-item--bullet::before, +.thank-you-screen__info-item--bullet::before { content: "•"; color: var(--color-pink); font-size: 1.5rem; @@ -67,7 +70,8 @@ line-height: 1.5; } -.welcome-screen__actions { +.welcome-screen__actions, +.thank-you-screen__actions { display: flex; justify-content: center; } @@ -405,6 +409,38 @@ border-top: 1px solid var(--color-lightgrey); } +.thank-you-screen { + align-items: center; + text-align: center; + margin: 2rem auto 0; +} + +.thank-you-screen__info-container { + text-align: start; + margin-block: 1.5rem; +} + +.thank-you-screen__logo { + display: flex; + justify-content: center; + align-items: center; + width: 3rem; + height: 3em; + border-radius: 50%; + background-color: var(--color-navyblue); + color: var(--color-white); +} + +.application-id h3 { + font-size: 1rem; + font-weight: 500; +} + +.application-id p { + font-size: 1.25rem; + font-weight: 700; +} + @media screen and (width <=1280px) { .new-stepper__form, .form-header, @@ -440,7 +476,8 @@ grid-template-columns: 1fr; } - .welcome-screen { + .welcome-screen, + .thank-you-screen { margin: 1rem auto; padding: 1.5rem; } @@ -476,6 +513,10 @@ text-align: left; max-width: 100%; } + + .form-header__text { + line-height: 1.5; + } } @media screen and (width <=480px) { @@ -493,7 +534,8 @@ padding: 1rem; } - .welcome-screen { + .welcome-screen, + .thank-you-screen { margin: 0.5rem auto 1rem; padding: 1rem; }