Generate username automatically - new signup

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>

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 = [

app/controllers/new-signup.js

@@ -7,6 +7,8 @@ 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;
@@ -41,6 +43,35 @@ export default class NewSignUpController extends Controller {
     this.analytics.trackEvent(NEW_SIGNUP_FLOW.USER_GETTING_STARTED);
   }
 
+  async generateUsername(firstname, lastname) {
+    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;
+      }
+    } catch (err) {
+      this.toast.error(
+        ERROR_MESSAGES.usernameGeneration,
+        'error!',
+        toastNotificationTimeoutOptions
+      );
+    }
+  }
+
   @action changeStepToThree() {
     this.currentStep = this.THIRD_STEP;
     this.analytics.trackEvent(NEW_SIGNUP_FLOW.USER_FIRST_NAME);
@@ -91,10 +122,14 @@ export default class NewSignUpController extends Controller {
   }
 
   @action async signup() {
+    const user = await this.generateUsername(
+      this.signupDetails.firstName,
+      this.signupDetails.lastName
+    );
     const signupDetails = {
       first_name: this.signupDetails.firstName,
       last_name: this.signupDetails.lastName,
-      username: this.signupDetails.username,
+      username: user?.username,
     };
     const roles = {};
     Object.entries(this.signupDetails.roles).forEach(([key, value]) => {

app/templates/new-signup.hbs

@@ -19,16 +19,16 @@
 
 {{#if (eq this.currentStep this.THIRD_STEP)}}
   <NewSignup::Input
-    @onClick={{this.changeStepToFour}}
+    @onClick={{this.register}}
     @currentStep={{this.currentStep}}
     @onChange={{this.handleInputChange}}
     @isButtonDisabled={{this.isButtonDisabled}}
     @isLoading={{this.isLoading}}
   />
 {{/if}}
 
-{{#if (eq this.currentStep this.FOURTH_STEP)}}
-  {{#if this.isDevMode}}
+{{#if this.isDevMode}}
+  {{#if (eq this.currentStep this.FOURTH_STEP)}}
     <NewSignup::Input
       @onClick={{this.changeStepToFive}}
       @currentStep={{this.currentStep}}
@@ -38,19 +38,8 @@
       @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.isDevMode}}
   {{#if (eq this.currentStep this.FIFTH_STEP)}}
     <NewSignup::Checkbox
       @onClick={{this.register}}