ALCS-2657 Added disable behavior on incorrect status

Author: fbarreta

portal-frontend/src/app/features/applications/view-submission/view-application-submission.component.html

@@ -16,13 +16,31 @@ <h4 *ngIf="application">Application ID: {{ application.fileNumber }} | {{ applic
 <div class="header top-bar">
   <button (click)="onNavigateHome()" mat-button color="accent"><mat-icon>chevron_left</mat-icon>Return to Inbox</button>
   <div class="btns-wrapper">
-    <button mat-flat-button color="accent" (click)="onReturnApplication()" *ngIf="
-      application && 
-      (application.status.code === SUBMISSION_STATUS.IN_REVIEW_BY_LG ||
-        application.status.code === SUBMISSION_STATUS.SUBMITTED_TO_LG)
-    ">
-      Return Application
-    </button>
+    <div
+          matTooltip="Start application review in order to return"
+          [matTooltipDisabled]="application && application.status.code !== SUBMISSION_STATUS.SUBMITTED_TO_LG"
+          class="return-tooltip"
+        >
+      <button
+        (click)="onReturnApplication()"
+        [disabled]="isLoading || (application && application.status.code === SUBMISSION_STATUS.SUBMITTED_TO_LG)"
+        mat-flat-button
+        color="accent"
+        class="return-button"
+        *ngIf="
+          application && 
+          (application.status.code === SUBMISSION_STATUS.IN_REVIEW_BY_LG ||
+          application.status.code === SUBMISSION_STATUS.RETURNED_TO_LG ||
+            application.status.code === SUBMISSION_STATUS.SUBMITTED_TO_LG)
+        "
+      >
+          
+            <div>
+              <span>Return Application</span>
+              <mat-icon class="icon" *ngIf="application && application.status.code === SUBMISSION_STATUS.SUBMITTED_TO_LG">info_outline</mat-icon>
+            </div>
+      </button>
+    </div>
     <button
       mat-flat-button
       color="primary"

portal-frontend/src/app/features/applications/view-submission/view-application-submission.component.scss

@@ -30,6 +30,17 @@
         margin-top: rem(16) !important;
       }
 
+      .return-tooltip {
+        float: left;
+        display: flex;
+      
+        button {
+          display: block;
+          float: right;
+          width: 100%;
+        }
+      }
+      
       @media screen and (min-width: $tabletBreakpoint) {
         display: inline-block;
         width: unset;
@@ -39,6 +50,10 @@
           margin-top: rem(8) !important;
         }
 
+        .return-tooltip {
+          margin-right: rem(16);
+        }
+
         button:last-child {
           margin-right: 0 !important;
         }
@@ -214,3 +229,11 @@ section {
   display: flex;
   align-items: center;
 }
+
+.icon {
+  height: rem(16);
+  width: rem(18);
+  font-size: rem(18);
+  margin-top: rem(2);
+  margin-left: rem(4);
+}