Generate username automatically - new signup (#604)

* Generate username automatically - new signup * Resolved comments * Fixed tests * Refactored code
Real-Dev-Squad · Aug 18, 2024 · 970cf4a · 970cf4a
1 parent 417c179
commit 970cf4a
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 76 deletions.
diff --git a/app/components/new-signup/input.hbs b/app/components/new-signup/input.hbs
@@ -25,7 +25,7 @@
       {{#if @dev}}
         Next
       {{else}}
-        {{if (eq @currentStep 'username') 'Submit' 'Next'}}
+        {{if (eq @currentStep 'lastName') 'Submit' 'Next'}}
       {{/if}}
     </Button>
   </div>

diff --git a/app/constants/new-signup.js b/app/constants/new-signup.js
@@ -24,6 +24,7 @@ export const LABEL_TEXT = {
 export const ERROR_MESSAGES = {
   userName: 'username already taken!',
   others: 'something went wrong',
+  usernameGeneration: 'Username cannot be generated',
 };
 
 export const CHECK_BOX_DATA = [

diff --git a/app/controllers/new-signup.js b/app/controllers/new-signup.js
@@ -7,10 +7,13 @@ 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';
+import { toastNotificationTimeoutOptions } from '../constants/toast-notification';
 
 export default class NewSignUpController extends Controller {
   @service analytics;
   @service featureFlag;
+  @service toast;
 
   queryParams = ['currentStep', 'dev'];
 
@@ -41,6 +44,42 @@ export default class NewSignUpController extends Controller {
     this.analytics.trackEvent(NEW_SIGNUP_FLOW.USER_GETTING_STARTED);
   }
 
+  async generateUsername(firstname, lastname) {
+    if (typeof firstname !== 'string' || typeof lastname !== 'string') {
+      throw new Error('Invalid input: firstname and lastname must be strings');
+    }
+    try {
+      const sanitizedFirstname = firstname.toLowerCase();
+      const sanitizedLastname = lastname.toLowerCase();
+
+      const response = await fetch(
+        `${ENV.BASE_API_URL}/users/username?dev=true&firstname=${sanitizedFirstname}&lastname=${sanitizedLastname}`,
+        {
+          method: 'GET',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          credentials: 'include',
+        }
+      );
+      const user = await response.json();
+
+      if (user && user.username) {
+        return user;
+      }
+      throw new Error(
+        'Username generation failed: Invalid response from server'
+      );
+    } catch (err) {
+      this.toast.error(
+        ERROR_MESSAGES.usernameGeneration,
+        'error!',
+        toastNotificationTimeoutOptions
+      );
+      throw new Error(ERROR_MESSAGES.usernameGeneration);
+    }
+  }
+
   @action changeStepToThree() {
     this.currentStep = this.THIRD_STEP;
     this.analytics.trackEvent(NEW_SIGNUP_FLOW.USER_FIRST_NAME);
@@ -91,69 +130,53 @@ export default class NewSignUpController extends Controller {
   }
 
   @action async signup() {
-    const signupDetails = {
-      first_name: this.signupDetails.firstName,
-      last_name: this.signupDetails.lastName,
-      username: this.signupDetails.username,
-    };
-    const roles = {};
-    Object.entries(this.signupDetails.roles).forEach(([key, value]) => {
-      if (value === true) {
-        roles[key] = value;
-      }
-    });
-
-    this.isLoading = true;
+    try {
+      let user;
+      this.isLoading = true;
+      if (!this.isDevMode)
+        user = 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 : user.username,
+      };
+      const roles = {};
+      Object.entries(this.signupDetails.roles).forEach(([key, value]) => {
+        if (value === true) {
+          roles[key] = value;
+        }
+      });
 
-    const isUsernameAvailable = await checkUserName(signupDetails.username);
-    if (!isUsernameAvailable) {
-      this.analytics.trackEvent(NEW_SIGNUP_FLOW.USERNAME_NOT_AVAILABLE);
-      this.isLoading = false;
-      this.isButtonDisabled = false;
-      return (this.error = ERROR_MESSAGES.userName);
-    }
+      const isUsernameAvailable = await checkUserName(signupDetails.username);
+      if (!isUsernameAvailable) {
+        this.analytics.trackEvent(NEW_SIGNUP_FLOW.USERNAME_NOT_AVAILABLE);
+        this.isLoading = false;
+        this.isButtonDisabled = false;
+        return (this.error = ERROR_MESSAGES.userName);
+      }
 
-    if (this.isDevMode) {
-      try {
-        const res = await newRegisterUser(signupDetails, roles);
-        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 (error) {
-        this.analytics.trackEvent(NEW_SIGNUP_FLOW.UNABLE_TO_REGISTER);
+      const res = this.isDevMode
+        ? await newRegisterUser(signupDetails, roles)
+        : await registerUser(signupDetails);
+      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;
-      } finally {
-        this.isLoading = false;
       }
-    } else {
-      //this will get removed after removing feature flag
-      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;
-        });
+    } catch (error) {
+      this.analytics.trackEvent(NEW_SIGNUP_FLOW.UNABLE_TO_REGISTER);
+      console.log(error);
+      this.error = error?.message || ERROR_MESSAGES.others;
+      this.isButtonDisabled = false;
+    } finally {
+      this.isLoading = false;
     }
   }
 }
diff --git a/app/templates/new-signup.hbs b/app/templates/new-signup.hbs
@@ -18,25 +18,13 @@
 {{/if}}
 
 {{#if (eq this.currentStep this.THIRD_STEP)}}
-  <NewSignup::Input
-    @onClick={{this.changeStepToFour}}
-    @currentStep={{this.currentStep}}
-    @onChange={{this.handleInputChange}}
-    @isButtonDisabled={{this.isButtonDisabled}}
-    @isLoading={{this.isLoading}}
-  />
-{{/if}}
-
-{{#if (eq this.currentStep this.FOURTH_STEP)}}
   {{#if this.isDevMode}}
     <NewSignup::Input
-      @onClick={{this.changeStepToFive}}
+      @onClick={{this.changeStepToFour}}
       @currentStep={{this.currentStep}}
-      @dev={{this.isDevMode}}
       @onChange={{this.handleInputChange}}
       @isButtonDisabled={{this.isButtonDisabled}}
       @isLoading={{this.isLoading}}
-      @error={{this.error}}
     />
   {{else}}
     <NewSignup::Input
@@ -51,6 +39,18 @@
 {{/if}}
 
 {{#if this.isDevMode}}
+  {{#if (eq this.currentStep this.FOURTH_STEP)}}
+    <NewSignup::Input
+      @onClick={{this.changeStepToFive}}
+      @currentStep={{this.currentStep}}
+      @dev={{this.isDevMode}}
+      @onChange={{this.handleInputChange}}
+      @isButtonDisabled={{this.isButtonDisabled}}
+      @isLoading={{this.isLoading}}
+      @error={{this.error}}
+    />
+  {{/if}}
+
   {{#if (eq this.currentStep this.FIFTH_STEP)}}
     <NewSignup::Checkbox
       @onClick={{this.register}}

diff --git a/tests/integration/components/new-signup/input-test.js b/tests/integration/components/new-signup/input-test.js
@@ -88,13 +88,13 @@ module('Integration | Component | new-sign-up/form', function (hooks) {
     assert.dom('[data-test-btn="signup"]').hasAnyText();
   });
 
-  test('button should have text Submit if the current step is username', async function (assert) {
+  test('button should have text Submit if the current step is lastName', async function (assert) {
     assert.expect(2);
     this.setProperties({
       onClick: function () {
         this.currentStep = this.LAST_STEP;
       },
-      currentStep: 'username',
+      currentStep: 'lastName',
     });
 
     await render(hbs`
@@ -107,13 +107,13 @@ module('Integration | Component | new-sign-up/form', function (hooks) {
     assert.dom('[data-test-btn="signup"]').hasText('Submit');
   });
 
-  test('button should have text Submit if the current step is username and if dev is set to false', async function (assert) {
+  test('button should have text Submit if the current step is lastName and if dev is set to false', async function (assert) {
     assert.expect(2);
     this.setProperties({
       onClick: function () {
         this.currentStep = this.LAST_STEP;
       },
-      currentStep: 'username',
+      currentStep: 'lastName',
       dev: false,
     });