added feature flag in new-signup flow

app/components/new-signup/input.hbs

@@ -16,13 +16,24 @@
   </div>
 
   <div class='signup-action__btn'>
-    <Button
-      @data-test-btn='signup'
-      @onClick={{@onClick}}
-      @disabled={{@isButtonDisabled}}
-      @isLoading={{@isLoading}}
-    >
-      {{if (eq @currentStep 'username') 'Submit' 'Next'}}
-    </Button>
+    {{#if this.dev}}
+      <Button
+        @data-test-btn='signup'
+        @onClick={{@onClick}}
+        @disabled={{@isButtonDisabled}}
+        @isLoading={{@isLoading}}
+      >
+        Next
+      </Button>
+    {{else}}
+      <Button
+        @data-test-btn='signup'
+        @onClick={{@onClick}}
+        @disabled={{@isButtonDisabled}}
+        @isLoading={{@isLoading}}
+      >
+        Submit
+      </Button>
+    {{/if}}
   </div>
 </div>

app/components/new-signup/select.hbs

@@ -0,0 +1,28 @@
+<div class='user-details'>
+  <h2 class='user-details__heading' data-test-signup-form-label>
+    {{this.label}}
+  </h2>
+  <div class='user-details__field role-details__field'>
+    <select
+      name='role'
+      id='role'
+      {{on 'change' this.selectFieldChanged}}
+      data-test-signup-form-select
+    >
+      <option disabled selected>Choose role</option>
+      <option value='developer' selected={{this.developer}}>Developer</option>
+      <option value='designer' selected={{this.designer}}>Designer</option>
+    </select>
+  </div>
+
+  <div class='signup-action__btn'>
+    <Button
+      @data-test-btn='signup'
+      @onClick={{@onClick}}
+      @disabled={{@isButtonDisabled}}
+      @isLoading={{@isLoading}}
+    >
+      Submit
+    </Button>
+  </div>
+</div>

app/components/new-signup/select.js

@@ -0,0 +1,16 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { LABEL_TEXT } from '../../constants/new-signup';
+
+export default class SignupComponent extends Component {
+  get label() {
+    const { currentStep } = this.args;
+
+    return LABEL_TEXT[currentStep];
+  }
+
+  @action selectFieldChanged({ target: { value } }) {
+    const { onChange, currentStep } = this.args;
+    onChange(currentStep, value);
+  }
+}

app/constants/analytics.js

@@ -4,6 +4,7 @@ export const NEW_SIGNUP_FLOW = {
   USER_FIRST_NAME: 'User entered First Name - New SignUp Flow',
   USER_LAST_NAME: 'User entered Last Name - New SignUp Flow',
   USER_USERNAME: 'User entered Username - New SignUp Flow',
+  USER_ROLE: 'User select Role - New SignUp Flow',
   SOMETHING_WENT_WRONG: 'Something went wrong - New SignUp Flow',
   USERNAME_NOT_AVAILABLE:
     'User entered a username which was already taken - New SignUp Flow',

app/constants/new-signup.js

@@ -2,20 +2,23 @@ const GET_STARTED = 'get-started';
 const FIRST_NAME = 'firstName';
 const LAST_NAME = 'lastName';
 const USERNAME = 'username';
+const ROLE = 'role';
 const THANK_YOU = 'thank-you';
 
 export const NEW_SIGNUP_STEPS = [
   GET_STARTED,
   FIRST_NAME,
   LAST_NAME,
   USERNAME,
+  ROLE,
   THANK_YOU,
 ];
 
 export const LABEL_TEXT = {
   firstName: 'What is your first name?',
   lastName: 'And what is your last name?',
   username: 'Now choose your awesome username!',
+  role: 'Select your role',
 };
 
 export const ERROR_MESSAGES = {

app/controllers/new-signup.js

@@ -7,11 +7,14 @@ import { GOTO_URL } from '../constants/url';
 import { NEW_SIGNUP_FLOW } from '../constants/analytics';
 import { ERROR_MESSAGES, NEW_SIGNUP_STEPS } from '../constants/new-signup';
 import checkUserName from '../utils/check-username';
+import ENV from 'website-my/config/environment';
+
+const { BASE_API_URL } = ENV;
 
 export default class NewSignUpController extends Controller {
   @service analytics;
 
-  queryParams = ['currentStep'];
+  queryParams = ['currentStep', 'dev'];
 
   @tracked isLoading = false;
   @tracked isButtonDisabled = true;
@@ -21,14 +24,19 @@ export default class NewSignUpController extends Controller {
   SECOND_STEP = NEW_SIGNUP_STEPS[1];
   THIRD_STEP = NEW_SIGNUP_STEPS[2];
   FOURTH_STEP = NEW_SIGNUP_STEPS[3];
-  LAST_STEP = NEW_SIGNUP_STEPS[4];
+  FIFTH_STEP = NEW_SIGNUP_STEPS[4];
+  LAST_STEP = NEW_SIGNUP_STEPS[5];
 
   @tracked signupDetails = {
     firstName: '',
     lastName: '',
     username: '',
   };
 
+  @tracked selectDeveloper = '';
+
+  @tracked selectDesigner = '';
+
   @action changeStepToTwo() {
     this.currentStep = this.SECOND_STEP;
     this.analytics.trackEvent(NEW_SIGNUP_FLOW.USER_GETTING_STARTED);
@@ -46,9 +54,15 @@ export default class NewSignUpController extends Controller {
     this.isButtonDisabled = true;
   }
 
-  @action register() {
+  @action changeStepToFive() {
+    this.currentStep = this.FIFTH_STEP;
     this.analytics.trackEvent(NEW_SIGNUP_FLOW.USER_USERNAME);
     this.isButtonDisabled = true;
+  }
+
+  @action register() {
+    this.analytics.trackEvent(NEW_SIGNUP_FLOW.USER_ROLE);
+    this.isButtonDisabled = true;
     this.signup();
   }
 
@@ -59,12 +73,33 @@ export default class NewSignUpController extends Controller {
 
   @action handleInputChange(key, value) {
     this.error = '';
-    set(this.signupDetails, key, value);
+    if (key === 'role') {
+      if (value === 'developer') {
+        this.developer = true;
+        this.designer = false;
+      } else if (value === 'designer') {
+        this.developer = false;
+        this.designer = true;
+      }
+    } else {
+      set(this.signupDetails, key, value);
+    }
     if (this.signupDetails[key] > '') this.isButtonDisabled = false;
-    else this.isButtonDisabled = true;
+    else if (this.developer > '' || this.designer > '') {
+      this.isButtonDisabled = false;
+    } else this.isButtonDisabled = true;
   }
 
   @action async signup() {
+    let roles;
+
+    if (this.dev) {
+      if (this.developer) {
+        roles = { developer: this.developer };
+      } else {
+        roles = { designer: this.designer };
+      }
+    }
     const signupDetails = {
       first_name: this.signupDetails.firstName,
       last_name: this.signupDetails.lastName,
@@ -80,25 +115,64 @@ export default class NewSignUpController extends Controller {
       return (this.error = ERROR_MESSAGES.userName);
     }
 
-    registerUser(signupDetails)
-      .then((res) => {
-        if (res.status === 204) {
-          this.analytics.identifyUser();
-          this.analytics.trackEvent(NEW_SIGNUP_FLOW.USER_REGISTERED);
-          this.currentStep = this.LAST_STEP;
-        } else {
-          this.analytics.trackEvent(NEW_SIGNUP_FLOW.UNABLE_TO_SIGNUP);
+    if (this.dev) {
+      fetch(`${BASE_API_URL}/users/self`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        credentials: 'include',
+      })
+        .then((getResponse) => getResponse.json())
+        .then((userData) => {
+          return registerUser({
+            ...signupDetails,
+            roles: {
+              ...userData.roles,
+              ...roles,
+            },
+          });
+        })
+        .then((res) => {
+          if (res.status === 204) {
+            this.analytics.identifyUser();
+            this.analytics.trackEvent(NEW_SIGNUP_FLOW.USER_REGISTERED);
+            this.currentStep = this.LAST_STEP;
+          } else {
+            this.analytics.trackEvent(NEW_SIGNUP_FLOW.UNABLE_TO_SIGNUP);
+            this.error = ERROR_MESSAGES.others;
+            this.isButtonDisabled = false;
+          }
+        })
+        .catch(() => {
+          this.analytics.trackEvent(NEW_SIGNUP_FLOW.UNABLE_TO_REGISTER);
           this.error = ERROR_MESSAGES.others;
           this.isButtonDisabled = false;
-        }
-      })
-      .catch(() => {
-        this.analytics.trackEvent(NEW_SIGNUP_FLOW.UNABLE_TO_REGISTER);
-        this.error = ERROR_MESSAGES.others;
-        this.isButtonDisabled = false;
-      })
-      .finally(() => {
-        this.isLoading = false;
-      });
+        })
+        .finally(() => {
+          this.isLoading = false;
+        });
+    } else {
+      registerUser(signupDetails)
+        .then((res) => {
+          if (res.status === 204) {
+            this.analytics.identifyUser();
+            this.analytics.trackEvent(NEW_SIGNUP_FLOW.USER_REGISTERED);
+            this.currentStep = this.LAST_STEP;
+          } else {
+            this.analytics.trackEvent(NEW_SIGNUP_FLOW.UNABLE_TO_SIGNUP);
+            this.error = ERROR_MESSAGES.others;
+            this.isButtonDisabled = false;
+          }
+        })
+        .catch(() => {
+          this.analytics.trackEvent(NEW_SIGNUP_FLOW.UNABLE_TO_REGISTER);
+          this.error = ERROR_MESSAGES.others;
+          this.isButtonDisabled = false;
+        })
+        .finally(() => {
+          this.isLoading = false;
+        });
+    }
   }
 }

app/styles/new-signup.css

@@ -20,10 +20,16 @@
   padding: 1rem;
 }
 
+.role-details__field {
+  display: flex;
+  justify-content: center;
+}
+
 .user-details__heading {
   font-size: 2rem;
   color: var(--user-details--heading--bg);
   margin-bottom: 0;
+  text-align: center;
 }
 
 .user-details__field input {
@@ -34,6 +40,15 @@
   font-size: 2rem;
 }
 
+.user-details__field select {
+  padding: 0.8rem; 
+  border-radius: 10px;
+  border: 2px solid var(--user-details--input--border);
+  font-size: 2rem;
+  width: 24rem;
+  transition: all 0.1s;
+}
+
 .signup-action__btn button {
   padding: .75rem 2rem;
   border-radius: 10px;
@@ -65,6 +80,7 @@
   }
 
   .user-details__field input,
+  .user-details__field select,
   .signup-action__btn button {
     font-size: 1.5rem;
   }
@@ -76,6 +92,7 @@
   }
 
   .user-details__field input,
+  .user-details__field select,
   .signup-action__btn button {
     font-size: 1.2rem;
   }

app/templates/new-signup.hbs

@@ -1,4 +1,4 @@
-{{page-title "New Sign Up"}}
+{{page-title 'New Sign Up'}}
 
 {{#if (eq this.currentStep this.FIRST_STEP)}}
   <NewSignup::Info
@@ -23,19 +23,42 @@
     @currentStep={{this.currentStep}}
     @onChange={{this.handleInputChange}}
     @isButtonDisabled={{this.isButtonDisabled}}
-    @isLoading={{this.isLoading}}  
+    @isLoading={{this.isLoading}}
   />
 {{/if}}
 
 {{#if (eq this.currentStep this.FOURTH_STEP)}}
-  <NewSignup::Input
-    @onClick={{this.register}}
-    @currentStep={{this.currentStep}}
-    @onChange={{this.handleInputChange}}
-    @isButtonDisabled={{this.isButtonDisabled}}
-    @isLoading={{this.isLoading}}
-    @error={{this.error}}
-  />
+  {{#if this.dev}}
+    <NewSignup::Input
+      @onClick={{this.changeStepToFive}}
+      @currentStep={{this.currentStep}}
+      @onChange={{this.handleInputChange}}
+      @isButtonDisabled={{this.isButtonDisabled}}
+      @isLoading={{this.isLoading}}
+      @error={{this.error}}
+    />
+  {{else}}
+    <NewSignup::Input
+      @onClick={{this.register}}
+      @currentStep={{this.currentStep}}
+      @onChange={{this.handleInputChange}}
+      @isButtonDisabled={{this.isButtonDisabled}}
+      @isLoading={{this.isLoading}}
+      @error={{this.error}}
+    />
+  {{/if}}
+{{/if}}
+
+{{#if this.dev}}
+  {{#if (eq this.currentStep this.FIFTH_STEP)}}
+    <NewSignup::Select
+      @onClick={{this.register}}
+      @currentStep={{this.currentStep}}
+      @onChange={{this.handleInputChange}}
+      @isButtonDisabled={{this.isButtonDisabled}}
+      @isLoading={{this.isLoading}}
+    />
+  {{/if}}
 {{/if}}
 
 {{#if (eq this.currentStep this.LAST_STEP)}}