Add billing details (#2136)

This adds functionality to billing details widget on home screen

console-webapp/src/app/home/widgets/billing-widget.component.html

@@ -1,13 +1,22 @@
 <mat-card>
   <mat-card-content>
     <div class="console-app__widget">
-      <div class="console-app__widget_left">
+      <a
+        class="console-app__widget_left"
+        href="{{ driveFolderUrl }}"
+        (click)="openBillingDetails($event)"
+      >
         <mat-icon class="console-app__widget-icon">account_balance</mat-icon>
         <h1 class="console-app__widget-title">Billing Info</h1>
         <h4 class="secondary-text text-center">
-          View important billing and payments information.
+          <span *ngIf="driveFolderUrl; else noDriveFolderUrl">
+            View important billing and payments information.
+          </span>
+          <ng-template #noDriveFolderUrl>
+            <span> Your billing folder is pending allocation. </span>
+          </ng-template>
         </h4>
-      </div>
+      </a>
     </div>
   </mat-card-content>
 </mat-card>

console-webapp/src/app/home/widgets/billing-widget.component.ts

@@ -13,11 +13,25 @@
 // limitations under the License.
 
 import { Component } from '@angular/core';
+import { RegistrarService } from 'src/app/registrar/registrar.service';
 
 @Component({
   selector: '[app-billing-widget]',
   templateUrl: './billing-widget.component.html',
 })
 export class BillingWidgetComponent {
-  constructor() {}
+  constructor(public registrarService: RegistrarService) {}
+
+  public get driveFolderUrl(): string {
+    if (this.registrarService?.registrar.driveFolderId) {
+      return `https://drive.google.com/drive/folders/${this.registrarService?.registrar.driveFolderId}`;
+    }
+    return '';
+  }
+
+  openBillingDetails(e: MouseEvent) {
+    if (!this.driveFolderUrl) {
+      e.preventDefault();
+    }
+  }
 }

console-webapp/src/app/registrar/registrar.service.ts

@@ -66,6 +66,12 @@ export class RegistrarService implements GlobalLoader {
     this.activeRegistrarIdChange.next(registrarId);
   }
 
+  public get registrar(): Registrar {
+    return this.registrars.filter(
+      (r) => r.registrarId === this.activeRegistrarId
+    )[0];
+  }
+
   loadingTimeout() {
     // TODO: Decide what to do when timeout happens
   }

console-webapp/src/styles.scss

@@ -31,6 +31,13 @@ body {
   &__widget {
     display: flex;
     gap: 10px;
+    > a {
+      text-decoration: none;
+      color: initial;
+    }
+    > a[href=""] {
+      cursor: not-allowed;
+    }
     &-wrapper__wide {
       grid-column: span 2;
     }