Merge pull request #892 from Real-Dev-Squad/develop

Dev to Main sync
Real-Dev-Squad · Aug 20, 2024 · 38ab2c8 · 38ab2c8
2 parents 564701a + 487c5bb
commit 38ab2c8
Show file tree

Hide file tree

Showing 21 changed files with 2,592 additions and 1,021 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -5,6 +5,7 @@
 /blueprints/*/files/
 
 # compiled output
+/declarations/
 /dist/
 
 # misc

diff --git a/app/components/join-steps/status-card.hbs b/app/components/join-steps/status-card.hbs
@@ -1,76 +1,75 @@
 <div data-test-status-card class="status-card">
-  <div data-test-status-card-heading-icon class="status-card__heading-Icon">
-    {{#each this.APPLICATION_STATUSES as |statusDetails|}}
-      {{#if (eq @status statusDetails.status)}}
-        <h3
-          data-test-status-card-heading
-          class="status-card__heading heading__h3"
-        >
-          {{statusDetails.heading}}
-        </h3>
-        <FaIcon
-          data-test-icon={{@status}}
-          @icon={{statusDetails.icon}}
-          @size="lg"
-          class="{{statusDetails.icon}}-icon"
-        />
-      {{/if}}
-    {{/each}}
-  </div>
-  <div
-    data-test-status-card-description-container
-    class="status-card__description"
-  >
-    {{#if (eq @status this.APPLICATION_STATUS_TYPES.pending)}}
-      <p data-test-status-card-description-1>
-        Your application is currently in pending state, please regularly check
-        this page for invite link.
-      </p>
-    {{else if (eq @status this.APPLICATION_STATUS_TYPES.rejected)}}
-      <p data-test-status-card-description-1>
-        Your application is rejected
-      </p>
-      {{#if @feedback}}
-        <p data-test-status-card-description-2>
-          <strong>Here's the feedback for your application</strong>
-        </p>
-        <p data-test-status-card-description-3>
-          {{@feedback}}
+  {{#if this.currentStatusDetails}}
+    <div data-test-status-card-heading-icon class="status-card__heading-icon">
+      <h3 data-test-status-card-heading class="status-card__heading heading__h3">
+        {{this.currentStatusDetails.heading}}
+      </h3>
+      <FaIcon 
+        data-test-icon={{this.status}} 
+        @icon={{this.currentStatusDetails.icon}} 
+        @size="2x" 
+        class="{{this.currentStatusDetails.icon}}-icon"
+      />
+    </div>
+
+    <div data-test-status-card-description-container class="status-card__description">
+      {{#if (eq this.status this.APPLICATION_STATUS_TYPES.pending)}}
+        <p data-test-status-card-description-1>
+          Your application is currently under review. Please check this page regularly for updates. If you don't receive an update within 10 days, please reach out to Ankush on <a href={{this.ANKUSH_TWITTER}} target="_blank" rel="noopener noreferrer">X</a> by providing below link 👇.
         </p>
-      {{/if}}
-    {{else if (eq @status this.APPLICATION_STATUS_TYPES.accepted)}}
-      <p data-test-status-card-description-1>
-        <b>Congratulations!</b>
-        Your application is accepted by us
-      </p>
-      {{#if @feedback}}
-        <p data-test-status-card-description-2>
-          <strong>Here's the feedback for your application</strong>
+      {{else if (eq this.status this.APPLICATION_STATUS_TYPES.rejected)}}
+        <p data-test-status-card-description-1>
+          We're sorry to inform you that your application has been rejected.
         </p>
-        <p data-test-status-card-description-3>
-          {{@feedback}}
+
+        {{#if this.feedback}}
+          <div class="status-card__feedback">
+            <p data-test-status-card-feedback-title><strong>Feedback:</strong></p>
+            <p data-test-status-card-feedback-content>{{this.feedback}}</p>
+          </div>
+        {{/if}}
+
+        <p data-test-status-card-description-encouragement>
+           Don't be discouraged. We encourage you to apply again in the future.
         </p>
+      {{else if (eq this.status this.APPLICATION_STATUS_TYPES.accepted)}}
+        <p data-test-status-card-description-1 class="status-card__congrats"><b>Congratulations!</b> Your application has been accepted.</p>
+        {{#if this.feedback}}
+          <div class="status-card__feedback">
+            <p data-test-status-card-description-2><strong>Feedback:</strong></p>
+            <p data-test-status-card-description-3>{{this.feedback}}</p>
+          </div>
+        {{/if}}
+        <p data-test-status-card-description-4>You're almost there! Join our Discord server to connect with the team.</p>
       {{/if}}
-      <p data-test-status-card-description-4>
-        Take the Next Step and Join Our Discord Server.
-      </p>
+    </div>
+
+    {{#if (eq this.status this.APPLICATION_STATUS_TYPES.pending)}}
+      <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>
+    {{/if}}
+
+    {{#if (eq this.status this.APPLICATION_STATUS_TYPES.accepted)}}
+      <div class="status-card__buttons">
+        <Reusables::Button 
+          @text="Join Discord" 
+          @variant="dark" 
+          @onClick={{@joinDiscord}} 
+          @test="join-discord-link" 
+          @type="button"
+        />
+      </div>
     {{/if}}
-  </div>
-  <div class="status-card__buttons">
-    <Reusables::Button
-      @text="Go to home"
-      @variant="dark"
-      {{!-- @onClick={{@joinDiscord}} --}}
-      @onClick={{this.redirectToHome}}
-      @test="join-discord-link"
-      @type="button"
-      {{!-- @disabled={{if
-        (not-eq @status this.APPLICATION_STATUS_TYPES.accepted)
-        true
-        false
-      }} --}}
-      {{! TODO : This was done for onboarding developers and should be removed later }}
-      {{!-- @disabled={{true}} --}}
-    />
-  </div>
+  {{/if}}
 </div>
diff --git a/app/components/join-steps/status-card.js b/app/components/join-steps/status-card.js
@@ -1,13 +1,23 @@
-import { action } from '@ember/object';
 import Component from '@glimmer/component';
 import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 import { APPLICATION_STATUS_TYPES } from '../../constants/join';
+import { USER_JOINED_LINK } from '../../constants/apis';
+import { TOAST_OPTIONS } from '../../constants/toast-options';
+import { ANKUSH_TWITTER } from '../../constants/urls';
 
 export default class StatusCardComponent extends Component {
   @service login;
   @service router;
+  @service onboarding;
+  @service toast;
+
+  @tracked fetchedStatus;
+  @tracked fetchedFeedback;
 
   APPLICATION_STATUS_TYPES = APPLICATION_STATUS_TYPES;
+  ANKUSH_TWITTER = ANKUSH_TWITTER;
 
   APPLICATION_STATUSES = [
     {
@@ -26,7 +36,64 @@ export default class StatusCardComponent extends Component {
       icon: 'square-check',
     },
   ];
-  @action redirectToHome() {
+
+  constructor() {
+    super(...arguments);
+    if (!this.login.userData?.id) {
+      this.showLoginRequiredToast();
+    } else {
+      this.fetchStatus();
+    }
+  }
+
+  get status() {
+    return this.args.status || this.fetchedStatus;
+  }
+
+  get feedback() {
+    return this.args.feedback || this.fetchedFeedback;
+  }
+
+  get currentStatusDetails() {
+    return this.APPLICATION_STATUSES.find((s) => s.status === this.status);
+  }
+
+  get introLink() {
+    return USER_JOINED_LINK(this.login.userData.id);
+  }
+
+  @action
+  async fetchStatus() {
+    await this.onboarding.getApplicationDetails();
+    this.fetchedStatus = this.onboarding.applicationData?.status;
+    this.fetchedFeedback = this.onboarding.applicationData?.feedback;
+  }
+
+  @action
+  redirectToHome() {
     this.router.transitionTo('/');
   }
+
+  @action
+  showLoginRequiredToast() {
+    this.toast.error(
+      'Please log in to view your application status',
+      'Login Required',
+      TOAST_OPTIONS,
+    );
+  }
+
+  @action
+  onSuccess() {
+    this.toast.success(
+      'Successfully copied to clipboard',
+      'Link Copied!',
+      TOAST_OPTIONS,
+    );
+  }
+
+  @action
+  onError() {
+    this.toast.error('Error in copying to clipboard', 'Error!', TOAST_OPTIONS);
+  }
 }
diff --git a/app/components/stepper.hbs b/app/components/stepper.hbs
@@ -1,5 +1,4 @@
 <section class='stepper'>
-  {{! Headings }}
   {{#each this.TITLE_MESSAGES as |message|}}
     {{#if (eq this.currentStep message.step)}}
       <h1 data-test-message={{message.id}} class='stepper__greeting'>
@@ -8,7 +7,6 @@
     {{/if}}
   {{/each}}
 
-  {{! Current Step }}
   {{#if (not-eq this.currentStep 0)}}
     {{#if (not-eq this.currentStep 5)}}
       <h3 class='details' data-test-step-detail>
@@ -27,66 +25,69 @@
       </h3>  
     {{/if}}
   {{/if}}
-<form class="stepper__form" onsubmit={{this.nextStep}}>
-  {{! Content }}
-  {{#if (eq this.currentStep 1)}}
-    <JoinSteps::StepOne @setIsPreValid={{this.setIsPreValid}} @isValid={{this.isValid}} @setIsValid={{this.setIsValid}} />
-  {{else if (eq this.currentStep 2)}}
-    <JoinSteps::StepTwo @setIsPreValid={{this.setIsPreValid}} @isValid={{this.isValid}} @setIsValid={{this.setIsValid}}/>
-  {{else if (eq this.currentStep 3)}}
-    <JoinSteps::StepThree @setIsPreValid={{this.setIsPreValid}} @isValid={{this.isValid}} @setIsValid={{this.setIsValid}}/>
-  {{else if (eq this.currentStep 4)}}
-    <JoinSteps::StepFour login={{this.login}} />
-  {{else if (eq this.currentStep 5)}}
-    <JoinSteps::StepFive />
-  {{/if}}
+
+  <form class="stepper__form" onsubmit={{this.nextStep}}>
+    {{#if (eq this.currentStep 1)}}
+      <JoinSteps::StepOne @setIsPreValid={{this.setIsPreValid}} @isValid={{this.isValid}} @setIsValid={{this.setIsValid}} />
+    {{else if (eq this.currentStep 2)}}
+      <JoinSteps::StepTwo @setIsPreValid={{this.setIsPreValid}} @isValid={{this.isValid}} @setIsValid={{this.setIsValid}}/>
+    {{else if (eq this.currentStep 3)}}
+      <JoinSteps::StepThree @setIsPreValid={{this.setIsPreValid}} @isValid={{this.isValid}} @setIsValid={{this.setIsValid}}/>
+    {{else if (eq this.currentStep 4)}}
+      <JoinSteps::StepFour login={{this.login}} />
+    {{else if (eq this.currentStep 5)}}
+        <JoinSteps::StatusCard 
+        @status={{this.applicationStatus}}
+        @feedback={{this.applicationFeedback}}
+        @joinDiscord={{this.joinDiscordHandler}}
+          />
+    {{/if}}
 
-  {{! Buttons }}
-  {{#if (eq this.currentStep 0)}}
-    <Reusables::Button
-      @text='Start'
-      @variant='dark'
-      @onClick={{this.startHandler}}
-      @test='start'
-      @type='button'
-    />
-  {{else if (eq this.currentStep 4)}}
-    <div class='stepper__buttons'>
+    {{#if (eq this.currentStep 0)}}
       <Reusables::Button
-        @text='Previous'
-        @variant='light'
-        @onClick={{this.decrementStep}}
-        @test='prev'
-        @type='button'
-      />
-      <Reusables::Button
-        @text='Submit'
+        @text='Start'
         @variant='dark'
-        @onClick={{this.joinHandler}}
-        @test='submit'
+        @onClick={{this.startHandler}}
+        @test='start'
         @type='button'
       />
-    </div>
-  {{else if (not-eq this.currentStep 5)}}
-    <div class='stepper__buttons'>
-      <Reusables::Button
-        data-test-prev-btn
-        @text='Previous'
-        @variant='light'
-        @onClick={{this.decrementStep}}
-        @test='prev'
-        @type='button'
-      />
-      <Reusables::Button
-        data-test-next-btn
-        @text={{if (eq this.currentStep 3) 'Preview' 'Next'}}
-        @variant='dark'
-        @disabled={{if (or this.preValid this.isValid) false true}}
-        @onClick={{this.nextStep}}
-        @test='next'
-        @type='submit'
-      />
-    </div>
-  {{/if}}
-</form>
-</section>
+    {{else if (eq this.currentStep 4)}}
+      <div class='stepper__buttons'>
+        <Reusables::Button
+          @text='Previous'
+          @variant='light'
+          @onClick={{this.decrementStep}}
+          @test='prev'
+          @type='button'
+        />
+        <Reusables::Button
+          @text='Submit'
+          @variant='dark'
+          @onClick={{this.joinHandler}}
+          @test='submit'
+          @type='button'
+        />
+      </div>
+    {{else if (not-eq this.currentStep 5)}}
+      <div class='stepper__buttons'>
+        <Reusables::Button
+          data-test-prev-btn
+          @text='Previous'
+          @variant='light'
+          @onClick={{this.decrementStep}}
+          @test='prev'
+          @type='button'
+        />
+        <Reusables::Button
+          data-test-next-btn
+          @text={{if (eq this.currentStep 3) 'Preview' 'Next'}}
+          @variant='dark'
+          @disabled={{if (or this.preValid this.isValid) false true}}
+          @onClick={{this.nextStep}}
+          @test='next'
+          @type='submit'
+        />
+      </div>
+    {{/if}}
+  </form>
+</section>