feat: add new step four and five for social links and whyRds [Onboarding-Form]

app/components/new-join-steps/new-step-five.hbs

@@ -0,0 +1,33 @@
+<div class="step-container">
+  <div class="form-header__text">
+    <h1 class="section-heading">{{@heading}}</h1>
+    <p class="section-instruction">{{@subHeading}}</p>
+  </div>
+
+  <Reusables::TextAreaBox @field='Why you want to join Real Dev Squad?' @name='whyRds'
+    @placeHolder='Tell us why you want to join our community...' @required={{true}} @value={{this.data.whyRds}}
+    @onInput={{this.inputHandler}} />
+  {{#if this.errorMessage.whyRds}}
+  <div class='error__message'>{{this.errorMessage.whyRds}}</div>
+  {{/if}}
+
+  <div class="form-grid form-grid--2">
+    <div class="form-grid__item">
+      <Reusables::InputBox @field='No of hours/week you are willing to contribute?' @name='numberOfHours'
+        @placeHolder='Enter value between 1-100.' @type='number' @required={{true}} @value={{this.data.numberOfHours}}
+        @onInput={{this.inputHandler}} @options={{this.heardFrom}} />
+      {{#if this.errorMessage.numberOfHours}}
+      <div class='error__message'>{{this.errorMessage.numberOfHours}}</div>
+      {{/if}}
+    </div>
+
+    <div class="form-grid__item">
+      <Reusables::Dropdown @field='How did you hear about us?' @name='foundFrom'
+        @placeHolder='Choose from below options' @required={{true}} @value={{this.data.foundFrom}}
+        @options={{this.heardFrom}} @onChange={{this.inputHandler}} />
+      {{#if this.errorMessage.foundFrom}}
+      <div class='error__message'>{{this.errorMessage.foundFrom}}</div>
+      {{/if}}
+    </div>
+  </div>
+</div>

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,
+  };
+}

app/components/new-join-steps/new-step-four.hbs

@@ -0,0 +1,62 @@
+<div class="step-container">
+  <div class="form-header__text">
+    <h1 class="section-heading">{{@heading}}</h1>
+    <p class="section-instruction">{{@subHeading}}</p>
+  </div>
+
+  <Reusables::InputBox @field='Phone Number' @name='phoneNumber' @placeHolder='+91 80000 00000' @type='tel'
+    @required={{true}} @value={{this.data.phoneNumber}} @onInput={{this.inputHandler}} @variant='input--full-width' />
+  {{#if this.errorMessage.phoneNumber}}
+  <div class='error__message'>{{this.errorMessage.phoneNumber}}</div>
+  {{/if}}
+
+  <Reusables::InputBox @field='Twitter' @name='twitter' @placeHolder='https://twitter.com/gangster-rishi' @type='text'
+    @required={{true}} @value={{this.data.twitter}} @onInput={{this.inputHandler}} @variant='input--full-width' />
+  {{#if this.errorMessage.twitter}}
+  <div class='error__message'>{{this.errorMessage.twitter}}</div>
+  {{/if}}
+
+  {{#if this.showGitHub}}
+  <Reusables::InputBox @field='GitHub' @name='github' @placeHolder='https://github.com/codewithrishi' @type='text'
+    @required={{true}} @value={{this.data.github}} @onInput={{this.inputHandler}} @variant='input--full-width' />
+  {{#if this.errorMessage.github}}
+  <div class='error__message'>{{this.errorMessage.github}}</div>
+  {{/if}}
+  {{/if}}
+
+  <Reusables::InputBox @field='LinkedIn' @name='linkedin' @placeHolder='https://linkedin.com/in/professional-rishi'
+    @type='text' @required={{true}} @value={{this.data.linkedin}} @onInput={{this.inputHandler}}
+    @variant='input--full-width' />
+  {{#if this.errorMessage.linkedin}}
+  <div class='error__message'>{{this.errorMessage.linkedin}}</div>
+  {{/if}}
+
+  <Reusables::InputBox @field='Instagram' @name='instagram' @placeHolder='https://instagram.com/gangster-rishi'
+    @type='text' @required={{false}} @value={{this.data.instagram}} @onInput={{this.inputHandler}}
+    @variant='input--full-width' />
+  {{#if this.errorMessage.instagram}}
+  <div class='error__message'>{{this.errorMessage.instagram}}</div>
+  {{/if}}
+
+  <Reusables::InputBox @field='Peerlist' @name='peerlist' @placeHolder='https://peerlist.io/richy-rishi' @type='text'
+    @required={{true}} @value={{this.data.peerlist}} @onInput={{this.inputHandler}} @variant='input--full-width' />
+  {{#if this.errorMessage.peerlist}}
+  <div class='error__message'>{{this.errorMessage.peerlist}}</div>
+  {{/if}}
+
+  {{#if this.showBehance}}
+  <Reusables::InputBox @field='Behance' @name='behance' @placeHolder='https://behance.net/designer-rishi' @type='text'
+    @required={{true}} @value={{this.data.behance}} @onInput={{this.inputHandler}} @variant='input--full-width' />
+  {{#if this.errorMessage.behance}}
+  <div class='error__message'>{{this.errorMessage.behance}}</div>
+  {{/if}}
+  {{/if}}
+
+  {{#if this.showDribble}}
+  <Reusables::InputBox @field='Dribble' @name='dribble' @placeHolder='https://dribbble.com/dribwithrishi' @type='text'
+    @required={{true}} @value={{this.data.dribble}} @onInput={{this.inputHandler}} @variant='input--full-width' />
+  {{#if this.errorMessage.dribble}}
+  <div class='error__message'>{{this.errorMessage.dribble}}</div>
+  {{/if}}
+  {{/if}}
+</div>

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);
+  }
+}