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 (eq @currentStep 'username') 'Submit' 'Next'}}
-
+ {{#if this.dev}}
+
+ Next
+
+ {{else}}
+
+ Submit
+
+ {{/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}}
+
+
+
+ Choose role
+ Developer
+ Designer
+
+
+
+
+
+ Submit
+
+
+
\ 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');
});
});