diff --git a/app/components/new-signup/input.hbs b/app/components/new-signup/input.hbs index b908e0a2..5bd6ba2a 100644 --- a/app/components/new-signup/input.hbs +++ b/app/components/new-signup/input.hbs @@ -16,13 +16,24 @@
- + {{#if this.dev}} + + {{else}} + + {{/if}}
\ No newline at end of file diff --git a/app/components/new-signup/select.hbs b/app/components/new-signup/select.hbs new file mode 100644 index 00000000..64db04f0 --- /dev/null +++ b/app/components/new-signup/select.hbs @@ -0,0 +1,28 @@ +
+

+ {{this.label}} +

+
+ +
+ +
+ +
+
\ No newline at end of file diff --git a/app/components/new-signup/select.js b/app/components/new-signup/select.js new file mode 100644 index 00000000..5acd0382 --- /dev/null +++ b/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); + } +} diff --git a/app/constants/analytics.js b/app/constants/analytics.js index 1cb770c8..f201e8f2 100644 --- a/app/constants/analytics.js +++ b/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', diff --git a/app/constants/new-signup.js b/app/constants/new-signup.js index ad505e61..a62ffaef 100644 --- a/app/constants/new-signup.js +++ b/app/constants/new-signup.js @@ -2,6 +2,7 @@ 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 = [ @@ -9,6 +10,7 @@ export const NEW_SIGNUP_STEPS = [ FIRST_NAME, LAST_NAME, USERNAME, + ROLE, THANK_YOU, ]; @@ -16,6 +18,7 @@ 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 = { diff --git a/app/controllers/new-signup.js b/app/controllers/new-signup.js index be98b188..4d32ec84 100644 --- a/app/controllers/new-signup.js +++ b/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,7 +24,8 @@ 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: '', @@ -29,6 +33,10 @@ export default class NewSignUpController extends Controller { 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; + }); + } } } diff --git a/app/styles/new-signup.css b/app/styles/new-signup.css index a0ff2c7c..42ca253c 100644 --- a/app/styles/new-signup.css +++ b/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; } diff --git a/app/templates/new-signup.hbs b/app/templates/new-signup.hbs index 54ea76a5..50931a66 100644 --- a/app/templates/new-signup.hbs +++ b/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)}} {{/if}} {{#if (eq this.currentStep this.FOURTH_STEP)}} - + {{#if this.dev}} + + {{else}} + + {{/if}} +{{/if}} + +{{#if this.dev}} + {{#if (eq this.currentStep this.FIFTH_STEP)}} + + {{/if}} {{/if}} {{#if (eq this.currentStep this.LAST_STEP)}} diff --git a/tests/integration/components/new-signup/input-test.js b/tests/integration/components/new-signup/input-test.js index eef47692..0162ceda 100644 --- a/tests/integration/components/new-signup/input-test.js +++ b/tests/integration/components/new-signup/input-test.js @@ -92,7 +92,7 @@ module('Integration | Component | new-sign-up/form', function (hooks) { assert.expect(2); this.setProperties({ onClick: function () { - this.currentStep = this.LAST_STEP; + this.currentStep = this.FIFTH_STEP; }, currentStep: 'username', }); @@ -104,7 +104,7 @@ module('Integration | Component | new-sign-up/form', function (hooks) { />`); assert.dom('[data-test-btn="signup"]').exists(); - assert.dom('[data-test-btn="signup"]').hasText('Submit'); + assert.dom('[data-test-btn="signup"]').hasAnyText(); }); test('It should have input field', async function (assert) { diff --git a/tests/integration/components/new-signup/select-test.js b/tests/integration/components/new-signup/select-test.js new file mode 100644 index 00000000..c9263b66 --- /dev/null +++ b/tests/integration/components/new-signup/select-test.js @@ -0,0 +1,70 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'ember-qunit'; +import { render } from '@ember/test-helpers'; +import { hbs } from 'ember-cli-htmlbars'; + +// handler functions are creating some problems need to fix em +module('Integration | Component | new-sign-up/form', function (hooks) { + setupRenderingTest(hooks); + + test('it has a select your role label when current step is role', async function (assert) { + assert.expect(1); + + this.setProperties({ + onClick: function () { + this.currentStep = this.LAST_STEP; + }, + currentStep: 'role', + }); + + await render(hbs` + `); + + assert.dom('[data-test-signup-form-label]').hasText('Select your role'); + }); + + test('button should have text Submit if the current step is role', async function (assert) { + assert.expect(2); + this.setProperties({ + onClick: function () { + this.currentStep = this.LAST_STEP; + }, + currentStep: 'role', + }); + + await render(hbs` + `); + + assert.dom('[data-test-btn="signup"]').exists(); + assert.dom('[data-test-btn="signup"]').hasText('Submit'); + }); + + test('It should have select field', async function (assert) { + assert.expect(3); + + this.setProperties({ + onClick: function () { + this.currentStep = this.LAST_STEP; + }, + currentStep: 'role', + }); + + await render(hbs` + `); + + assert.dom('[data-test-signup-form-select]').exists(); + assert + .dom('[data-test-signup-form-select]') + .hasAttribute('name', 'role') + .hasAttribute('id', 'role'); + }); +}); diff --git a/tests/unit/controllers/new-signup-test.js b/tests/unit/controllers/new-signup-test.js index c3bbcf4f..f8d769a7 100644 --- a/tests/unit/controllers/new-signup-test.js +++ b/tests/unit/controllers/new-signup-test.js @@ -32,6 +32,13 @@ module('Unit | Controller | new-signup', function (hooks) { 'username', 'current step updated to username' ); + + controller.send('changeStepToFive'); + assert.equal( + controller.currentStep, + 'role', + 'current step updated to role' + ); }); test('testing handleInput change function', function (assert) { @@ -78,5 +85,15 @@ module('Unit | Controller | new-signup', function (hooks) { 'vinayak', 'username value updated' ); + + controller.send('handleInputChange', 'role', 'developer'); + assert.equal(controller.developer, true, 'developer set to true'); + + assert.equal(controller.designer, false, 'designer set to false'); + + controller.send('handleInputChange', 'role', 'designer'); + assert.equal(controller.designer, true, 'designer set to true'); + + assert.equal(controller.developer, false, 'developer set to false'); }); });