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..ded36fdc --- /dev/null +++ b/app/components/new-join-steps/new-step-five.hbs @@ -0,0 +1,33 @@ +
+
+

{{@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..71a35326 --- /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, + STEP_DATA_STORAGE_KEY, +} from '../../constants/new-join-form'; +import { heardFrom } from '../../constants/social-data'; + +export default class NewStepFiveComponent extends BaseStepComponent { + storageKey = STEP_DATA_STORAGE_KEY.stepFive; + heardFrom = heardFrom; + + stepValidation = { + whyRds: NEW_STEP_LIMITS.stepFive.whyRds, + foundFrom: NEW_STEP_LIMITS.stepFive.foundFrom, + }; +} 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..40106a44 --- /dev/null +++ b/app/components/new-join-steps/new-step-four.hbs @@ -0,0 +1,62 @@ +
+
+

{{@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}} +
\ 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 new file mode 100644 index 00000000..bae00758 --- /dev/null +++ b/app/components/new-join-steps/new-step-four.js @@ -0,0 +1,80 @@ +import BaseStepComponent from './base-step'; +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 = STEP_DATA_STORAGE_KEY.stepFour; + + stepValidation = { + 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') || '{}', + ); + return stepOneData.role || ''; + } + + postLoadInitialize() { + if (this.userRole === 'Developer') { + this.stepValidation.github = NEW_STEP_LIMITS.stepFour.github; + } + + if (this.userRole === 'Designer') { + 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.stepValidation).map((k) => [k, '']), + ); + + this.wordCount = Object.fromEntries( + Object.keys(this.stepValidation).map((k) => { + let val = this.data[k] || ''; + return [k, val.trim().split(/\s+/).filter(Boolean).length || 0]; + }), + ); + } + + get showGitHub() { + return this.userRole === 'Developer'; + } + + get showBehance() { + return this.userRole === 'Designer'; + } + + 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/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 013ca6e8..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,39 +12,46 @@ @disabled={{not this.joinApplicationTerms.hasUserAcceptedTerms}} /> - {{else if (eq this.currentStep 1)}} - - {{else if (eq this.currentStep 2)}} - - - {{else if (eq this.currentStep 3)}} - + {{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 6)}} + + + {{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 91ce46ba..0cfb9fb6 100644 --- a/app/constants/new-join-form.js +++ b/app/constants/new-join-form.js @@ -3,11 +3,17 @@ export const NEW_FORM_STEPS = { 'Upload Professional Headshot and Complete Personal Details', 'Additional Personal Information', 'Your hobbies, interests, fun fact', + 'Connect your social profiles', + 'Why Real Dev Squad?', + 'Review and Submit', ], 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', + 'Review your answers before submitting.', ], }; @@ -36,10 +42,26 @@ 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: { min: 0 }, + peerlist: { min: 1 }, + behance: { min: 1 }, + dribble: { min: 1 }, + }, + stepFive: { + whyRds: { min: 100 }, + foundFrom: { min: 1 }, + }, }; export const STEP_DATA_STORAGE_KEY = { stepOne: 'newStepOneData', stepTwo: 'newStepTwoData', stepThree: 'newStepThreeData', + stepFour: 'newStepFourData', + stepFive: 'newStepFiveData', }; 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; }