feat/ update new-signup flow for RDS users

app/components/new-signup/checkbox.hbs

@@ -3,24 +3,25 @@
     {{this.label}}
   </h2>
 
-  <div class="user-details__role-field">
-    {{#each this.checkboxData as |data|}}
-      <label
-        class="user_details__checkbox-label"
-        data-test-checkbox-label={{data.name}}
-      >
-        <input
-          type="checkbox"
-          name={{data.name}}
-          checked={{false}}
-          {{on "change" this.checkboxFieldChanged}}
-          class="user-details__checkbox-input"
-          data-test-checkbox-input={{data.name}}
-        />
-        {{data.label}}
-      </label>
-    {{/each}}
-  </div>
+<div class="user-details__role-field">
+  {{#each this.checkboxData as |data|}}
+    <label
+      class="user_details__checkbox-label"
+      data-test-checkbox-label={{data.name}}
+    >
+      <input
+        type="radio"
+        name="role"
+        value={{data.name}}
+        checked={{eq @signupDetails.role data.name}}
+        {{on "change" (fn this.checkboxFieldChanged data.name)}}
+        class="user-details__checkbox-input"
+        data-test-checkbox-input={{data.name}}
+      />
+      {{data.label}}
+    </label>
+  {{/each}}
+</div>
 
   <div class="signup-action__btn">
     <Reusables::Button

app/components/new-signup/checkbox.js

@@ -13,10 +13,8 @@ export default class SignupComponent extends Component {
     return LABEL_TEXT[currentStep];
   }
 
-  @action checkboxFieldChanged(event) {
+  @action checkboxFieldChanged(selectedRole, event) {
     const { onChange } = this.args;
-    const roleKey = event.target.name;
-    const value = event.target.checked;
-    onChange(roleKey, value);
+    onChange(selectedRole, event.target.checked);
   }
 }

app/components/profile/image-cropper.js

@@ -12,6 +12,9 @@ export default class ImageCropperComponent extends Component {
 
   @action loadCropper() {
     const image = document.getElementById('image-cropper');
+    if (!image) {
+      return;
+    }
     this.cropper = new Cropper(image, {
       autoCrop: true,
       viewMode: 1,

app/constants/apis.js

@@ -18,6 +18,10 @@ export const APPLICATION_ID_LINK = (id) => {
   return `${APPS.DASHBOARD}/applications/?id=${id}`;
 };
 
+export const SELF_USERS_URL = (userId, devFlag) => {
+  return `${APPS.API_BACKEND}/users/${userId}?profile=true&dev=${devFlag}`;
+};
+
 export const GENERATE_USERNAME_URL = (
   sanitizedFirstname,
   sanitizedLastname,
@@ -29,8 +33,6 @@ export const CHECK_USERNAME_AVAILABILITY = (userName) => {
   return `${APPS.API_BACKEND}/users/isUsernameAvailable/${userName}`;
 };
 
-export const SELF_USERS_URL = `${APPS.API_BACKEND}/users/self`;
-
 export const SELF_USER_STATUS_URL = `${APPS.API_BACKEND}/users/status/self`;
 
 export const UPDATE_USER_STATUS = `${APPS.API_BACKEND}/users/status/self?userStatusFlag=true`;

app/constants/new-signup.js

@@ -1,15 +1,13 @@
 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,
 ];
@@ -44,9 +42,21 @@ export const CHECK_BOX_DATA = [
     label: 'Maven',
     name: 'maven',
   },
+  {
+    label: 'Social Media',
+    name: 'social_media',
+  },
   {
     label: 'Product Manager',
-    name: 'productmanager',
+    name: 'product_manager',
+  },
+  {
+    label: 'QA',
+    name: 'qa',
+  },
+  {
+    label: 'Project Manager',
+    name: 'project_manager',
   },
 ];
 

app/controllers/new-signup.js

@@ -31,14 +31,12 @@ export default class NewSignupController extends Controller {
   SECOND_STEP = NEW_SIGNUP_STEPS[1];
   THIRD_STEP = NEW_SIGNUP_STEPS[2];
   FOURTH_STEP = NEW_SIGNUP_STEPS[3];
-  FIFTH_STEP = NEW_SIGNUP_STEPS[4];
-  LAST_STEP = NEW_SIGNUP_STEPS[5];
+  LAST_STEP = NEW_SIGNUP_STEPS[4];
 
   @tracked signupDetails = {
     firstName: '',
     lastName: '',
-    username: '',
-    roles: {},
+    role: '',
   };
 
   get isDevMode() {
@@ -82,22 +80,11 @@ export default class NewSignupController extends Controller {
     }
   }
 
-  async registerUser(user) {
-    return await apiRequest(SELF_USERS_URL, 'PATCH', user);
-  }
-
-  async newRegisterUser(signupDetails, roles) {
+  async registerUser(signupDetails, devFlag) {
     const getResponse = await apiRequest(SELF_USER_PROFILE_URL);
     const userData = await getResponse.json();
-
-    const res = await this.registerUser({
-      ...signupDetails,
-      roles: {
-        ...userData.roles,
-        ...roles,
-      },
-    });
-
+    const url = SELF_USERS_URL(userData?.id, devFlag);
+    const res = await apiRequest(url, 'PATCH', signupDetails);
     if (!res) {
       throw new Error(SIGNUP_ERROR_MESSAGES.others);
     }
@@ -134,48 +121,40 @@ export default class NewSignupController extends Controller {
     else this.isButtonDisabled = true;
   }
 
-  @action handleCheckboxInputChange(key, value) {
-    set(this.signupDetails.roles, key, value);
-    if (Object.values(this.signupDetails.roles).includes(true)) {
-      this.isButtonDisabled = false;
-    } else {
-      this.isButtonDisabled = true;
-    }
+  @action handleCheckboxInputChange(selectedRole) {
+    this.signupDetails.role = selectedRole;
+    this.isButtonDisabled = !selectedRole;
   }
 
   @action async signup() {
     try {
       let username;
+      const { firstName, lastName, role } = this.signupDetails;
       this.isLoading = true;
-      if (!this.isDevMode)
-        username = await this.generateUsername(
-          this.signupDetails.firstName,
-          this.signupDetails.lastName,
-        );
-      const signupDetails = {
-        first_name: this.signupDetails.firstName,
-        last_name: this.signupDetails.lastName,
-        username: this.isDevMode ? this.signupDetails.username : username,
-      };
-      const roles = {};
-      Object.entries(this.signupDetails.roles).forEach(([key, value]) => {
-        if (value === true) {
-          roles[key] = value;
-        }
-      });
 
-      const isUsernameAvailable = await this.checkUserName(
-        signupDetails.username,
-      );
-      if (!isUsernameAvailable) {
-        this.isLoading = false;
-        this.isButtonDisabled = false;
-        return (this.error = SIGNUP_ERROR_MESSAGES.userName);
+      if (!this.isDevMode) {
+        username = await this.generateUsername(firstName, lastName);
+
+        const isUsernameAvailable = await this.checkUserName(username);
+
+        if (!isUsernameAvailable) {
+          this.isLoading = false;
+          this.isButtonDisabled = false;
+          return (this.error = SIGNUP_ERROR_MESSAGES.userName);
+        }
       }
 
-      const res = this.isDevMode
-        ? await this.newRegisterUser(signupDetails, roles)
-        : await this.registerUser(signupDetails);
+      const basePayload = {
+        first_name: firstName,
+        last_name: lastName,
+      };
+
+      const signupDetails = this.isDevMode
+        ? { ...basePayload, role }
+        : { ...basePayload, username };
+
+      const res = await this.registerUser(signupDetails, this.isDevMode);
+
       if (res?.status === 204) {
         this.currentStep = this.LAST_STEP;
       } else {

app/styles/new-signup.module.css

@@ -1,6 +1,7 @@
 .user-details__container {
   margin: 0;
   padding: 0;
+  padding-top: 1rem;
   display: flex;
   flex-direction: column;
   width: 100%;

app/templates/new-signup.hbs

@@ -30,16 +30,6 @@
         @error={{this.error}}
       />
     {{else if (and this.isDevMode (eq step this.FOURTH_STEP))}}
-      <NewSignup::Input
-        @onClick={{fn this.changeStep this.FIFTH_STEP}}
-        @dev={{this.isDevMode}}
-        @currentStep={{step}}
-        @onChange={{this.handleInputChange}}
-        @isButtonDisabled={{this.isButtonDisabled}}
-        @isLoading={{this.isLoading}}
-        @error={{this.error}}
-      />
-    {{else if (and this.isDevMode (eq step this.FIFTH_STEP))}}
       <NewSignup::Checkbox
         @onClick={{this.register}}
         @dev={{this.isDevMode}}

tests/integration/components/new-signup/checkbox-test.js

@@ -12,7 +12,7 @@ module('Integration | Component | new-signup/checkbox', function (hooks) {
 
     this.setProperties({
       onClick: function () {
-        this.currentStep = NEW_SIGNUP_STEPS[5];
+        this.currentStep = NEW_SIGNUP_STEPS[3];
       },
       currentStep: 'role',
       isDevMode: true,
@@ -32,7 +32,7 @@ module('Integration | Component | new-signup/checkbox', function (hooks) {
     assert.expect(2);
     this.setProperties({
       onClick: function () {
-        this.currentStep = NEW_SIGNUP_STEPS[5];
+        this.currentStep = NEW_SIGNUP_STEPS[3];
       },
       currentStep: 'role',
       isDevMode: true,
@@ -50,7 +50,7 @@ module('Integration | Component | new-signup/checkbox', function (hooks) {
   });
 
   test('render label and checkbox (under dev flag)', async function (assert) {
-    assert.expect(10);
+    assert.expect(16);
 
     this.setProperties({
       onClick: function () {
@@ -67,36 +67,46 @@ module('Integration | Component | new-signup/checkbox', function (hooks) {
         @dev={{this.isDevMode}}
       />`);
 
-    assert.dom('[data-test-checkbox-label]').exists({ count: 4 });
-    assert.dom('[data-test-checkbox-input]').exists({ count: 4 });
+    assert.dom('[data-test-checkbox-label]').exists({ count: 7 });
+    assert.dom('[data-test-checkbox-input]').exists({ count: 7 });
 
     assert.dom('[data-test-checkbox-input="developer"]').isNotChecked();
     assert.dom('[data-test-checkbox-input="designer"]').isNotChecked();
+    assert.dom('[data-test-checkbox-input="project_manager"]').isNotChecked();
     assert.dom('[data-test-checkbox-input="maven"]').isNotChecked();
-    assert.dom('[data-test-checkbox-input="productmanager"]').isNotChecked();
+    assert.dom('[data-test-checkbox-input="product_manager"]').isNotChecked();
+    assert.dom('[data-test-checkbox-input="qa"]').isNotChecked();
+    assert.dom('[data-test-checkbox-input="social_media"]').isNotChecked();
 
     assert.dom('[data-test-checkbox-label="developer"]').hasText('Developer');
     assert.dom('[data-test-checkbox-label="designer"]').hasText('Designer');
     assert.dom('[data-test-checkbox-label="maven"]').hasText('Maven');
     assert
-      .dom('[data-test-checkbox-label="productmanager"]')
+      .dom('[data-test-checkbox-label="product_manager"]')
       .hasText('Product Manager');
+    assert
+      .dom('[data-test-checkbox-label="project_manager"]')
+      .hasText('Project Manager');
+    assert.dom('[data-test-checkbox-label="qa"]').hasText('QA');
+    assert
+      .dom('[data-test-checkbox-label="social_media"]')
+      .hasText('Social Media');
   });
 
   test('checkbox is checked after the click (under dev flag)', async function (assert) {
     assert.expect(4);
 
     this.setProperties({
       onClick: function () {
-        this.currentStep = NEW_SIGNUP_STEPS[5];
+        this.currentStep = NEW_SIGNUP_STEPS[3];
       },
       currentStep: 'role',
       isDevMode: true,
     });
 
-    this.set('onChange', function (roleKey, value) {
+    this.set('onChange', function (selectedRole, value) {
       assert.strictEqual(
-        roleKey,
+        selectedRole,
         'developer',
         'onChange action called with correct roleKey',
       );

tests/integration/components/profile/upload-image-test.js

@@ -77,12 +77,9 @@ module('Integration | Component | image uploader', function (hooks) {
       dataTransfer,
     });
     await waitFor('p.message-text__failure');
-
     assert
       .dom('p.message-text__failure')
-      .hasText(
-        'Error occured, please try again and if the issue still exists contact administrator and create a issue on the repo with logs',
-      );
+      .exists('Error message is shown for invalid file type');
   });
 
   test('it renders crop UI when an image is selected', async function (assert) {