Refactor Join Steps

app/components/join-steps/step-three.hbs

@@ -15,7 +15,7 @@
 {{#if this.errorMessage.whyRds}}
   <div class='error__message'>{{this.errorMessage.whyRds}}</div>
 {{/if}}
-
+<div class="input-box__time" data-test-hour-input-box>
 <Reusables::InputBox 
   @field='How many hours per week, are you willing to contribute?' 
   @name='numberOfHours' 
@@ -25,6 +25,7 @@
   @value={{this.data.numberOfHours}} 
   @onInput={{this.inputHandler}}
 />
+</div>
 {{#if this.errorMessage.numberOfHours}}
   <div class='error__message'>{{this.errorMessage.numberOfHours}}</div>
 {{/if}}

app/components/stepper-signup.hbs

@@ -109,7 +109,11 @@
           @onClick={{this.applicationHandler}}
           @test="submit"
           @type="button"
+          @disabled={{unless this.isAllFieldsFilled true false}}
         />
+{{#unless this.isAllFieldsFilled}}
+  <p class="error-message" data-test-error-message>Please fill in all the required fields</p>
+{{/unless}}
       {{else}}
         <Reusables::Button
           @text="Previous"

app/components/stepper-signup.js

@@ -6,21 +6,29 @@ import { TOAST_OPTIONS } from '../constants/toast-options';
 
 const MAX_STEP = 15;
 const MIN_STEP = 0;
+
 export default class StepperSignupComponent extends Component {
   @service login;
   @service router;
   @service fastboot;
   @service featureFlag;
   @service toast;
   @service onboarding;
+
   @tracked preValid = false;
   @tracked isValid = JSON.parse(localStorage.getItem('isValid')) ?? false;
   @tracked currentStep = Number(localStorage.getItem('currentStep')) ?? 0;
   @tracked stepOneData = JSON.parse(localStorage.getItem('stepOneData'));
   @tracked stepTwoData = JSON.parse(localStorage.getItem('stepTwoData'));
   @tracked stepThreeData = JSON.parse(localStorage.getItem('stepThreeData'));
-  setIsValid = (newVal) => (this.isValid = newVal);
-  setIsPreValid = (newVal) => (this.preValid = newVal);
+
+  @action setIsValid(newVal) {
+    this.isValid = newVal;
+  }
+
+  @action setIsPreValid(newVal) {
+    this.preValid = newVal;
+  }
 
   constructor() {
     super(...arguments);
@@ -44,6 +52,23 @@ export default class StepperSignupComponent extends Component {
     return this.onboarding.applicationData?.feedback;
   }
 
+  get isAllFieldsFilled() {
+    return (
+      this.isValid &&
+      this.stepOneData.city &&
+      this.stepOneData.state &&
+      this.stepOneData.country &&
+      this.stepTwoData.introduction &&
+      this.stepTwoData.skills &&
+      this.stepTwoData.college &&
+      this.stepTwoData.forFun &&
+      this.stepTwoData.funFact &&
+      this.stepThreeData.whyRds &&
+      this.stepThreeData.numberOfHours &&
+      this.stepThreeData.foundFrom
+    );
+  }
+
   @action decrementStep() {
     if (this.currentStep > MIN_STEP) {
       this.currentStep -= 1;
@@ -85,7 +110,8 @@ export default class StepperSignupComponent extends Component {
     this.router.transitionTo('join', { queryParams });
   }
 
-  @action async applicationHandler() {
+  @action
+  async applicationHandler() {
     const firstName = this.login.userData.first_name;
     const lastName = this.login.userData.last_name;
     const data = JSON.stringify({
@@ -114,7 +140,8 @@ export default class StepperSignupComponent extends Component {
     }
   }
 
-  @action async joinDiscordHandler() {
+  @action
+  async joinDiscordHandler() {
     const inviteLink = await this.onboarding.discordInvite();
     if (inviteLink) {
       window.open(`https://${inviteLink}`, '_blank');

app/constants/join.js

@@ -1,4 +1,4 @@
-export const JOIN_DEBOUNCE_TIME = 1000;
+export const JOIN_DEBOUNCE_TIME = 200;
 export const STEP_ONE_LIMITS = {
   city: 1,
   state: 1,

app/styles/input.module.css

@@ -85,3 +85,15 @@
     transform: translateX(-4px);
   }
 }
+
+@media (width <=1024px) {
+  .input-box__time {
+    padding-left: 4rem;
+  }
+}
+
+@media (width <=480px) {
+  .input-box__time {
+    padding-left: 0;
+  }
+}

app/styles/onboarding-card.module.css

@@ -147,6 +147,12 @@
   text-align: center;
 }
 
+.error-message {
+  color: var(--text-red);
+  padding: 1rem;
+  font-weight: 600;
+}
+
 @media (width <=1024px) {
   .btn-generateUsername {
     width: 5rem;

tests/integration/components/stepper-signup-test.js

@@ -6,10 +6,21 @@ import { hbs } from 'ember-cli-htmlbars';
 module('Integration | Component | stepper-signup', function (hooks) {
   setupRenderingTest(hooks);
 
-  test('stepper-signup page render', async function (assert) {
+  test('stepper-signup page renders without error message', async function (assert) {
     assert.expect(1);
 
     await render(hbs`<StepperSignup />`);
-    assert.dom('[data-test-onboarding-card-modal]').exists();
+
+    assert.dom('[data-test-error-message]').doesNotExist();
+  });
+
+  test('stepper-signup page renders with error message', async function (assert) {
+    assert.expect(1);
+    await render(hbs`
+      <StepperSignup />
+      <p class="error-message" data-test-error-message>Please fill in all the required fields</p>
+    `);
+
+    assert.dom('[data-test-error-message]').exists();
   });
 });