Pass name/email/phone info to the new console front end (#2180)

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

@@ -5,21 +5,23 @@
         <mat-icon class="console-app__widget-icon">call</mat-icon>
         <h1 class="console-app__widget-title">Contact Support</h1>
         <h4 class="secondary-text text-center">
-          View Google Registry support email and phone information
+          Let us know if you have any questions
         </h4>
       </div>
       <div class="console-app__widget_right">
-        <button mat-button color="primary" class="console-app__widget-link">
-          Give us a Call
-        </button>
+        <div class="console-app__widget-section-header">Give us a Call</div>
         <p class="secondary-text">
-          Call Google Registry support at <b>+1 (404) 978 8419</b>
+          Call {{ userDataService.userData?.productName }} support at
+          <a href="tel:{{ userDataService.userData?.supportPhoneNumber }}">{{
+            userDataService.userData?.supportPhoneNumber
+          }}</a>
         </p>
-        <button mat-button color="primary" class="console-app__widget-link">
-          Send us an Email
-        </button>
+        <div class="console-app__widget-section-header">Send us an Email</div>
         <p class="secondary-text">
-          Email Google Registry at <b>support@google.com</b>
+          Email {{ userDataService.userData?.productName }} at
+          <a href="mailto:{{ userDataService.userData?.supportEmail }}">{{
+            userDataService.userData?.supportEmail
+          }}</a>
         </p>
       </div>
     </div>

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

@@ -13,11 +13,12 @@
 // limitations under the License.
 
 import { Component } from '@angular/core';
+import { UserDataService } from 'src/app/shared/services/userData.service';
 
 @Component({
   selector: '[app-contact-widget]',
   templateUrl: './contact-widget.component.html',
 })
 export class ContactWidgetComponent {
-  constructor() {}
+  constructor(public userDataService: UserDataService) {}
 }

console-webapp/src/app/shared/services/userData.service.ts

@@ -19,8 +19,11 @@ import { MatSnackBar } from '@angular/material/snack-bar';
 import { GlobalLoader, GlobalLoaderService } from './globalLoader.service';
 
 export interface UserData {
-  isAdmin: boolean;
   globalRole: string;
+  isAdmin: boolean;
+  productName: string;
+  supportEmail: string;
+  supportPhoneNumber: string;
   technicalDocsUrl: string;
 }
 

console-webapp/src/styles.scss

@@ -47,6 +47,10 @@ body {
       min-width: auto !important;
       height: min-content !important;
     }
+    &-section-header {
+      font-weight: 500;
+      color: var(--primary) !important;
+    }
     &-title {
       color: var(--primary) !important;
       text-align: center;