feat: integrate create application API in onboarding form

app/components/join-steps/status-card.hbs

@@ -67,15 +67,25 @@
       <div class="joining__copy">
         <h3 class="details" data-test-link-text>Here is your personalized link</h3>
         <p id="url" class="copy__link">{{this.introLink}}</p>
-        <CopyButton
-          data-test-copy-btn
-          @target="#url"
-          @onSuccess={{this.onSuccess}}
-          @onError={{this.onError}}
-          class="btn btn-dark"
-        >
-          Copy
-        </CopyButton>
+
+        <div class="status-card__buttons">
+          <CopyButton
+            data-test-copy-btn
+            @target="#url"
+            @onSuccess={{this.onSuccess}}
+            @onError={{this.onError}}
+            class="btn btn-dark"
+          >
+            Copy
+          </CopyButton>
+          <Reusables::Button
+            @text="Track Application"
+            @variant="dark"
+            @onClick={{this.trackApplication}}
+            @test="track-application-btn"
+            @type="button"
+          />
+        </div>
       </div>
     {{/if}}
 

app/components/join-steps/status-card.js

@@ -62,6 +62,10 @@ export default class StatusCardComponent extends Component {
     return USER_JOINED_LINK(this.login.userData.id);
   }
 
+  get applicationId() {
+    return this.onboarding.applicationData?.id;
+  }
+
   @action
   async fetchStatus() {
     await this.onboarding.getApplicationDetails();
@@ -96,4 +100,14 @@ export default class StatusCardComponent extends Component {
   onError() {
     this.toast.error('Error in copying to clipboard', 'Error!', TOAST_OPTIONS);
   }
+
+  @action
+  trackApplication() {
+    if (this.applicationId) {
+      // ToDo: remove dev=true once feature flag is removed from application detail apge
+      this.router.transitionTo('applications.detail', this.applicationId, {
+        queryParams: { dev: true },
+      });
+    }
+  }
 }

app/components/new-join-steps/base-step.js

@@ -1,7 +1,7 @@
 import { action } from '@ember/object';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { debounceTask } from 'ember-lifeline';
+import { debounceTask, runTask } from 'ember-lifeline';
 import { JOIN_DEBOUNCE_TIME } from '../../constants/join';
 import { validateWordCount } from '../../utils/validator';
 import { getLocalStorageItem, setLocalStorageItem } from '../../utils/storage';
@@ -46,7 +46,7 @@ export default class BaseStepComponent extends Component {
       }),
     );
 
-    this.postLoadInitialize();
+    runTask(this, 'postLoadInitialize');
 
     const valid = this.isDataValid();
     this.args.setIsPreValid(valid);

app/components/new-join-steps/new-step-four.hbs

@@ -6,16 +6,16 @@
 
   <Reusables::InputBox
     @field="Phone Number"
-    @name="phoneNumber"
+    @name="phoneNo"
     @placeHolder="+91 80000 00000"
     @type="tel"
     @required={{true}}
-    @value={{this.data.phoneNumber}}
+    @value={{this.data.phoneNo}}
     @onInput={{this.inputHandler}}
     @variant="input--full-width"
   />
-  {{#if this.errorMessage.phoneNumber}}
-    <div class="error__message">{{this.errorMessage.phoneNumber}}</div>
+  {{#if this.errorMessage.phoneNo}}
+    <div class="error__message">{{this.errorMessage.phoneNo}}</div>
   {{/if}}
 
   <Reusables::InputBox

app/components/new-join-steps/new-step-four.js

@@ -9,7 +9,7 @@ export default class NewStepFourComponent extends BaseStepComponent {
   storageKey = STEP_DATA_STORAGE_KEY.stepFour;
 
   stepValidation = {
-    phoneNumber: NEW_STEP_LIMITS.stepFour.phoneNumber,
+    phoneNo: NEW_STEP_LIMITS.stepFour.phoneNo,
     twitter: NEW_STEP_LIMITS.stepFour.twitter,
     linkedin: NEW_STEP_LIMITS.stepFour.linkedin,
     instagram: NEW_STEP_LIMITS.stepFour.instagram,
@@ -59,7 +59,7 @@ export default class NewStepFourComponent extends BaseStepComponent {
   }
 
   validateField(field, value) {
-    if (field === 'phoneNumber') {
+    if (field === 'phoneNo') {
       const trimmedValue = value?.trim() || '';
       const isValid = trimmedValue && phoneNumberRegex.test(trimmedValue);
       return {
@@ -71,7 +71,7 @@ export default class NewStepFourComponent extends BaseStepComponent {
   }
 
   formatError(field, result) {
-    if (field === 'phoneNumber') {
+    if (field === 'phoneNo') {
       if (result.isValid) return '';
       return 'Please enter a valid phone number (e.g., +91 80000 00000)';
     }

app/components/new-join-steps/new-step-one.hbs

@@ -68,7 +68,7 @@
       @type="text"
       @disabled={{true}}
       @required={{true}}
-      @value={{this.data.fullName}}
+      @value={{this.fullName}}
       @onInput={{this.inputHandler}}
     />
 

app/components/new-join-steps/new-step-one.js

@@ -31,19 +31,24 @@ export default class NewStepOneComponent extends BaseStepComponent {
     role: NEW_STEP_LIMITS.stepOne.role,
   };
 
+  get fullName() {
+    const firstName = this.data.firstName || '';
+    const lastName = this.data.lastName || '';
+    return `${firstName} ${lastName}`.trim();
+  }
+
   postLoadInitialize() {
     if (
-      !this.data.fullName &&
+      !this.data.firstName &&
+      !this.data.lastName &&
       this.login.userData?.first_name &&
       this.login.userData?.last_name
     ) {
-      this.updateFieldValue(
-        'fullName',
-        `${this.login.userData.first_name} ${this.login.userData.last_name}`,
-      );
+      this.updateFieldValue('firstName', this.login.userData.first_name);
+      this.updateFieldValue('lastName', this.login.userData.last_name);
     }
-    if (this.data.profileImageBase64) {
-      this.imagePreview = this.data.profileImageBase64;
+    if (this.data.imageUrl) {
+      this.imagePreview = this.data.imageUrl;
     }
   }
 
@@ -88,7 +93,7 @@ export default class NewStepOneComponent extends BaseStepComponent {
     reader.onload = (e) => {
       const base64String = e.target.result;
       this.imagePreview = base64String;
-      this.updateFieldValue?.('profileImageBase64', base64String);
+      this.updateFieldValue?.('imageUrl', base64String);
       this.isImageUploading = false;
     };
     reader.onerror = () => {

app/components/new-join-steps/new-step-six.hbs

@@ -20,16 +20,9 @@
         <span class="review-field__label">Full Name:</span>
         <span
           class="review-field__value
-            {{unless
-              this.stepData.one.fullName
-              'review-field__value--missing'
-            }}"
+            {{unless this.fullName 'review-field__value--missing'}}"
         >
-          {{if
-            this.stepData.one.fullName
-            this.stepData.one.fullName
-            "Not provided"
-          }}
+          {{if this.fullName this.fullName "Not provided"}}
         </span>
       </div>
       <div class="review-field">
@@ -52,9 +45,19 @@
       </div>
       <div class="review-field">
         <span class="review-field__label">Profile Image:</span>
-        <span class="review-field__value review-field__value--empty">
-          Not uploaded
-        </span>
+        {{#if this.hasProfileImage}}
+          <div class="review-field__image-preview">
+            <img
+              src={{this.profileImage}}
+              alt="Profile preview"
+              class="image-preview"
+            />
+          </div>
+        {{else}}
+          <span class="review-field__value review-field__value--empty">
+            Not uploaded
+          </span>
+        {{/if}}
       </div>
     </div>
   </div>
@@ -88,13 +91,13 @@
         <span class="review-field__label">Institution/Company:</span>
         <span
           class="review-field__value
-            {{unless this.stepData.two.company 'review-field__value--missing'}}"
+            {{unless this.stepData.two.college 'review-field__value--missing'}}"
         >
-          {{if
-            this.stepData.two.company
-            this.stepData.two.company
-            "Not provided"
-          }}
+          {{#if this.stepData.two.college}}
+            {{this.stepData.two.college}}
+          {{else}}
+            Not provided
+          {{/if}}
         </span>
       </div>
       <div class="review-field">
@@ -129,19 +132,19 @@
     </div>
     <div class="review-section__content">
       <div class="review-field">
-        <span class="review-field__label">Hobbies:</span>
+        <span class="review-field__label">For fun:</span>
         <span
           class="review-field__value
             {{unless
-              this.stepData.three.hobbies
+              this.stepData.three.forFun
               'review-field__value--missing'
             }}"
         >
-          {{if
-            this.stepData.three.hobbies
-            this.stepData.three.hobbies
-            "Not provided"
-          }}
+          {{#if this.stepData.three.forFun}}
+            {{this.stepData.three.forFun}}
+          {{else}}
+            Not provided
+          {{/if}}
         </span>
       </div>
       <div class="review-field">

app/components/new-join-steps/new-step-six.js

@@ -1,7 +1,7 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { getLocalStorageItem } from '../../utils/storage';
 import { STEP_DATA_STORAGE_KEY } from '../../constants/new-join-form';
+import { safeParse } from '../../utils/storage';
 
 export default class NewStepSixComponent extends Component {
   @tracked stepData = {
@@ -18,21 +18,17 @@ export default class NewStepSixComponent extends Component {
   }
 
   loadAllStepData() {
-    this.stepData.one = JSON.parse(
-      getLocalStorageItem(STEP_DATA_STORAGE_KEY.stepOne),
-    );
-    this.stepData.two = JSON.parse(
-      getLocalStorageItem(STEP_DATA_STORAGE_KEY.stepTwo),
-    );
-    this.stepData.three = JSON.parse(
-      getLocalStorageItem(STEP_DATA_STORAGE_KEY.stepThree),
-    );
-    this.stepData.four = JSON.parse(
-      getLocalStorageItem(STEP_DATA_STORAGE_KEY.stepFour),
-    );
-    this.stepData.five = JSON.parse(
-      getLocalStorageItem(STEP_DATA_STORAGE_KEY.stepFive),
-    );
+    this.stepData.one = safeParse(STEP_DATA_STORAGE_KEY.stepOne);
+    this.stepData.two = safeParse(STEP_DATA_STORAGE_KEY.stepTwo);
+    this.stepData.three = safeParse(STEP_DATA_STORAGE_KEY.stepThree);
+    this.stepData.four = safeParse(STEP_DATA_STORAGE_KEY.stepFour);
+    this.stepData.five = safeParse(STEP_DATA_STORAGE_KEY.stepFive);
+  }
+
+  get fullName() {
+    const firstName = this.stepData.one.firstName || '';
+    const lastName = this.stepData.one.lastName || '';
+    return `${firstName} ${lastName}`.trim();
   }
 
   get userRole() {
@@ -54,4 +50,12 @@ export default class NewStepSixComponent extends Component {
   get locationDisplay() {
     return `${this.stepData.one.city}, ${this.stepData.one.state}, ${this.stepData.one.country}`;
   }
+
+  get profileImage() {
+    return this.stepData.one.imageUrl || null;
+  }
+
+  get hasProfileImage() {
+    return !!this.profileImage;
+  }
 }

app/components/new-join-steps/new-step-three.hbs

@@ -8,22 +8,22 @@
     <div class="form-grid__item">
       <Reusables::TextAreaBox
         @field="What do you do for fun? Your hobbies/interests?"
-        @name="hobbies"
+        @name="forFun"
         @placeHolder="Tell us about your hobbies and interests..."
         @required={{true}}
-        @value={{this.data.hobbies}}
+        @value={{this.data.forFun}}
         @onInput={{this.inputHandler}}
       />
       <div
         class="word-count"
-        data-test-word-count="hobbies"
-      >{{this.wordCount.hobbies}}/{{this.stepValidation.hobbies.max}}
+        data-test-word-count="forFun"
+      >{{this.wordCount.forFun}}/{{this.stepValidation.forFun.max}}
         words</div>
-      {{#if this.errorMessage.hobbies}}
+      {{#if this.errorMessage.forFun}}
         <div
           class="error__message"
-          data-test-error="hobbies"
-        >{{this.errorMessage.hobbies}}</div>
+          data-test-error="forFun"
+        >{{this.errorMessage.forFun}}</div>
       {{/if}}
     </div>
 

app/components/new-join-steps/new-step-three.js

@@ -7,7 +7,7 @@ import {
 export default class NewStepThreeComponent extends BaseStepComponent {
   storageKey = STEP_DATA_STORAGE_KEY.stepThree;
   stepValidation = {
-    hobbies: NEW_STEP_LIMITS.stepThree.hobbies,
+    forFun: NEW_STEP_LIMITS.stepThree.forFun,
     funFact: NEW_STEP_LIMITS.stepThree.funFact,
   };
 }

app/components/new-join-steps/new-step-two.hbs

@@ -27,18 +27,18 @@
       <div class="form-grid__item">
         <Reusables::InputBox
           @field="Your institution/company"
-          @name="company"
+          @name="college"
           @placeHolder="Institution or company name"
           @type="text"
           @required={{true}}
-          @value={{this.data.company}}
+          @value={{this.data.college}}
           @onInput={{this.inputHandler}}
         />
-        {{#if this.errorMessage.company}}
+        {{#if this.errorMessage.college}}
           <div
             class="error__message"
-            data-test-error="company"
-          >{{this.errorMessage.company}}</div>
+            data-test-error="college"
+          >{{this.errorMessage.college}}</div>
         {{/if}}
       </div>
     </div>

app/components/new-join-steps/new-step-two.js

@@ -8,7 +8,7 @@ export default class NewStepTwoComponent extends BaseStepComponent {
   storageKey = STEP_DATA_STORAGE_KEY.stepTwo;
   stepValidation = {
     skills: NEW_STEP_LIMITS.stepTwo.skills,
-    company: NEW_STEP_LIMITS.stepTwo.company,
+    college: NEW_STEP_LIMITS.stepTwo.college,
     introduction: NEW_STEP_LIMITS.stepTwo.introduction,
   };
 }