From d9f69e716e1f98a4ab14de03cc02ff3b05af256e Mon Sep 17 00:00:00 2001
From: vinit717 <vinit224488@gmail.com>
Date: Thu, 18 Jan 2024 12:14:35 +0530
Subject: [PATCH 1/3] disable submit btn

---
 app/components/stepper-signup.hbs             |  4 +++
 app/components/stepper-signup.js              | 35 ++++++++++++++++---
 app/styles/onboarding-card.module.css         |  6 ++++
 .../components/stepper-signup-test.js         |  4 ++-
 4 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/app/components/stepper-signup.hbs b/app/components/stepper-signup.hbs
index 82b97038..9d0504fe 100644
--- a/app/components/stepper-signup.hbs
+++ b/app/components/stepper-signup.hbs
@@ -111,7 +111,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"
diff --git a/app/components/stepper-signup.js b/app/components/stepper-signup.js
index 6a5db272..5e0855e4 100644
--- a/app/components/stepper-signup.js
+++ b/app/components/stepper-signup.js
@@ -6,6 +6,7 @@ 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;
@@ -13,14 +14,21 @@ export default class StepperSignupComponent extends Component {
   @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');
diff --git a/app/styles/onboarding-card.module.css b/app/styles/onboarding-card.module.css
index 37967a66..7b974d74 100644
--- a/app/styles/onboarding-card.module.css
+++ b/app/styles/onboarding-card.module.css
@@ -244,6 +244,12 @@ profile-service-page__inputcontainer__input-label {
   text-align: center;
 }
 
+.error-message {
+  color: var(--text-red);
+  padding: 1rem;
+  font-weight: 600;
+}
+
 @media (width <=1024px) {
   .btn-generateUsername {
     width: 5rem;
diff --git a/tests/integration/components/stepper-signup-test.js b/tests/integration/components/stepper-signup-test.js
index 3dad3e56..5698a47b 100644
--- a/tests/integration/components/stepper-signup-test.js
+++ b/tests/integration/components/stepper-signup-test.js
@@ -7,9 +7,11 @@ module('Integration | Component | stepper-signup', function (hooks) {
   setupRenderingTest(hooks);
 
   test('stepper-signup page render', async function (assert) {
-    assert.expect(1);
+    assert.expect(2);
 
     await render(hbs`<StepperSignup />`);
+
     assert.dom('[data-test-onboarding-card-modal]').exists();
+    assert.dom('[data-test-error-message]').doesNotExist();
   });
 });

From 00183a66ecab25f44eb43a4fa39bff87d51a97f9 Mon Sep 17 00:00:00 2001
From: vinit717 <vinit224488@gmail.com>
Date: Fri, 19 Jan 2024 10:58:36 +0530
Subject: [PATCH 2/3] decrease debounce time and fix hour input style

---
 app/components/join-steps/step-three.hbs |  3 ++-
 app/constants/join.js                    |  2 +-
 app/styles/input.module.css              | 12 ++++++++++++
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/app/components/join-steps/step-three.hbs b/app/components/join-steps/step-three.hbs
index 845cc966..2a41dd7f 100644
--- a/app/components/join-steps/step-three.hbs
+++ b/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__hour">
 <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}}
diff --git a/app/constants/join.js b/app/constants/join.js
index e573c74d..4b5b09fb 100644
--- a/app/constants/join.js
+++ b/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,
diff --git a/app/styles/input.module.css b/app/styles/input.module.css
index 6173a8b6..6a9734d0 100644
--- a/app/styles/input.module.css
+++ b/app/styles/input.module.css
@@ -85,3 +85,15 @@
     transform: translateX(-4px);
   }
 }
+
+@media (width <=1024px) {
+  .input-box__hour {
+    padding-left: 4rem;
+  }
+}
+
+@media (width <=480px) {
+  .input-box__hour {
+    padding-left: 0;
+  }
+}

From 62b7f8e7c0036f96d8277cf13ea7053b87c9a67a Mon Sep 17 00:00:00 2001
From: vinit717 <vinit224488@gmail.com>
Date: Mon, 29 Jan 2024 10:40:16 +0530
Subject: [PATCH 3/3] change class name

---
 app/components/join-steps/step-three.hbs          |  2 +-
 app/styles/input.module.css                       |  4 ++--
 .../integration/components/stepper-signup-test.js | 15 ++++++++++++---
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/app/components/join-steps/step-three.hbs b/app/components/join-steps/step-three.hbs
index 2a41dd7f..c8f8f873 100644
--- a/app/components/join-steps/step-three.hbs
+++ b/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__hour">
+<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' 
diff --git a/app/styles/input.module.css b/app/styles/input.module.css
index 6a9734d0..25aba6f1 100644
--- a/app/styles/input.module.css
+++ b/app/styles/input.module.css
@@ -87,13 +87,13 @@
 }
 
 @media (width <=1024px) {
-  .input-box__hour {
+  .input-box__time {
     padding-left: 4rem;
   }
 }
 
 @media (width <=480px) {
-  .input-box__hour {
+  .input-box__time {
     padding-left: 0;
   }
 }
diff --git a/tests/integration/components/stepper-signup-test.js b/tests/integration/components/stepper-signup-test.js
index 5698a47b..6c2dd400 100644
--- a/tests/integration/components/stepper-signup-test.js
+++ b/tests/integration/components/stepper-signup-test.js
@@ -6,12 +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) {
-    assert.expect(2);
+  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();
+  });
 });