premium content commented out

frontend/angular/src/app/components/my-career-web/dashboard/home/home.component.html

-<div class="home-wrapper" *ngIf="!isMobileView">
+<div class="home-wrapper position-relative" *ngIf="!isMobileView">
+    <app-overlay [isActive]="isLoading"></app-overlay>
     <div class="home-header">
-        <div class="home-header-heading">Hey Mark, Welcome to Matchd Career.</div>
+        <div class="home-header-heading">Hey {{careerProfile?.Candidate?.User?.FirstName}}, Welcome to Matchd Career.</div>
         <div class="home-header-card">
             <div class="home-header-card-content">
                 We need some information from you so you can fill out your career profile and get job hunting.
@@ -10,20 +11,20 @@
     </div>
     <div class="home-body">
 
-        <div class="home-body-heading">
-            Get to know yourself
-        </div>
+<!--        <div class="home-body-heading">-->
+<!--            Get to know yourself-->
+<!--        </div>-->
 
-        <div class="home-body-extra-features" style="min-height: 240px;">
-            <div class="extra-feature">
-                <div class="feature-heading">Development Reports</div>
-                <div class="feature-content">Information about feature that gives user context as to why to upgrade.</div>
-                <div class="feature-action">View my summary report</div>
-            </div>
-            <div class="extra-feature-image" style="position: relative;">
-                <img src="assets/my-career-web/svgs/summary-report.svg" style="position: absolute; top: -54px; right: -26px;">
-            </div>
-        </div>
+<!--        <div class="home-body-extra-features" style="min-height: 240px;">-->
+<!--            <div class="extra-feature">-->
+<!--                <div class="feature-heading">Development Reports</div>-->
+<!--                <div class="feature-content">Information about feature that gives user context as to why to upgrade.</div>-->
+<!--                <div class="feature-action">View my summary report</div>-->
+<!--            </div>-->
+<!--            <div class="extra-feature-image" style="position: relative;">-->
+<!--                <img src="assets/my-career-web/svgs/summary-report.svg" style="position: absolute; top: -54px; right: -26px;">-->
+<!--            </div>-->
+<!--        </div>-->
 
 
         <div class="home-body-heading">
@@ -60,8 +61,8 @@
 
 
 <!--    Mobile View -->
-<div class="home-mobile-wrapper" *ngIf="isMobileView">
-
+<div class="home-mobile-wrapper position-relative" *ngIf="isMobileView">
+    <app-overlay [isActive]="isLoading"></app-overlay>
     <div class="home-mobile-tabs">
         <div class="home-mobile-tab" [ngClass]="{selected: selectedMobileTab === 'dashboard'}" (click)="selectedMobileTab = 'dashboard'">Dashboard</div>
         <div class="home-mobile-tab" [ngClass]="{selected: selectedMobileTab === 'tasks'}" (click)="selectedMobileTab = 'tasks'">Tasks</div>
@@ -70,7 +71,7 @@
     <div class="mobile-tab-content" *ngIf="selectedMobileTab === 'dashboard'">
 
         <div class="home-mobile-header">
-            <div class="mobile-header-heading">Hey Mark, Welcome to Matchd Career.</div>
+            <div class="mobile-header-heading">Hey {{careerProfile?.Candidate?.User?.FirstName}}, Welcome to Matchd Career.</div>
             <div class="mobile-header-card">
                 We need some information from you so you can fill out your career profile and get job hunting.
                 <div class="mobile-header-card-action" routerLink="/my-career-web/dashboard/personal-details">I'm ready to get started</div>
@@ -80,21 +81,21 @@
 
         <div class="home-mobile-body">
 
-            <div class="mobile-body-heading">
-                Get to know yourself
-            </div>
-
-            <div class="home-mobile-body-features">
-                <div class="feature">
-                    <div class="feature-heading">Development Reports</div>
-                    <div class="feature-content">Information about feature that gives user context as to why to upgrade.</div>
-                    <div class="feature-action">Get this feature</div>
-
-                    <div class="extra-feature-image" style="position: relative;">
-                        <img src="assets/my-career-web/svgs/summary-report.svg" style="margin-top: 10px;">
-                    </div>
-                </div>
-            </div>
+<!--            <div class="mobile-body-heading">-->
+<!--                Get to know yourself-->
+<!--            </div>-->
+
+<!--            <div class="home-mobile-body-features">-->
+<!--                <div class="feature">-->
+<!--                    <div class="feature-heading">Development Reports</div>-->
+<!--                    <div class="feature-content">Information about feature that gives user context as to why to upgrade.</div>-->
+<!--                    <div class="feature-action">Get this feature</div>-->
+
+<!--                    <div class="extra-feature-image" style="position: relative;">-->
+<!--                        <img src="assets/my-career-web/svgs/summary-report.svg" style="margin-top: 10px;">-->
+<!--                    </div>-->
+<!--                </div>-->
+<!--            </div>-->
 
 
             <div class="mobile-body-heading">

frontend/angular/src/app/components/my-career-web/dashboard/home/home.component.ts

 import { Component, OnInit } from '@angular/core';
 import { BaseComponent } from '../../base/base.component';
+import { takeUntil } from 'rxjs/operators';
+import { PersonalDetailsService } from '../../services/personal-details.service';
+import { CareerProfileModel } from '../../models/career-profile.model';
+import { UtilsService } from '../../../../oneit/services/utils.service';
+import { HelperService } from '../../services/helper.service';
 
 @Component({
     selector: 'app-home',
@@ -9,12 +14,38 @@ import { BaseComponent } from '../../base/base.component';
 export class HomeComponent extends BaseComponent implements OnInit {
 
     selectedMobileTab = 'dashboard';
+    careerProfile = new CareerProfileModel();
+    assocs = ['Candidate.User', 'Candidate.OccupationPreference'];
 
-    constructor() {
+    constructor(
+        private ps: PersonalDetailsService,
+        private hs: HelperService,
+        private us: UtilsService,
+    ) {
         super();
     }
 
     ngOnInit() {
+        this.getCareerProfile();
+        this.ps.careerProfileUpdated$
+            .pipe(takeUntil(this.componentInView))
+            .subscribe(profile => {
+                this.careerProfile = this.us.cloneObject(profile);
+            })
+    }
+
+    getCareerProfile(): void {
+        this.isLoading = true;
+        this.ps.getCareerProfile(this.assocs)
+            .pipe(takeUntil(this.componentInView))
+            .subscribe(response => {
+                this.careerProfile = response;
+                this.ps.careerProfileUpdated = this.careerProfile;
+                this.isLoading = false;
+            }, err => {
+                this.hs.handleHttpError(err);
+                this.isLoading = false;
+            })
     }
 
 }

frontend/angular/src/app/components/my-career-web/dashboard/profile-tasks/profile-tasks.component.html

 <div class="right-sidebar">
-    <app-overlay [isActive]="isLoading"></app-overlay>
     <div class="user-profile">
         <i class="fa fa-bell" *ngIf="!isMobileView"></i>
         <div class="user-profile-avatar-wrapper" [ngStyle]="{backgroundImage: avatarBorder}">

frontend/angular/src/app/components/my-career-web/dashboard/profile-tasks/profile-tasks.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { BaseComponent } from '../../base/base.component';
 import { PersonalDetailsService } from '../../services/personal-details.service';
 import { takeUntil } from 'rxjs/operators';
-import { CareerProfileModel } from '../../models/career-profile.model';
-import { HelperService } from '../../services/helper.service';
 import { UtilsService } from '../../../../oneit/services/utils.service';
+import { CareerProfileModel } from '../../models/career-profile.model';
 
 @Component({
     selector: 'app-profile-tasks',
     templateUrl: './profile-tasks.component.html',
     styleUrls: ['./profile-tasks.component.scss']
 })
-export class ProfileTasksComponent extends BaseComponent implements OnInit {
+export class ProfileTasksComponent extends BaseComponent {
 
-    assocs = ['Candidate.User', 'Candidate.OccupationPreference'];
     careerProfile = new CareerProfileModel();
     avatarBorder = 'linear-gradient(90deg, transparent 50%, #EAECEE 50%), linear-gradient(90deg, #EAECEE 50%, transparent 50%)';
 
     constructor(
-        private hs: HelperService,
-        private us: UtilsService,
-        private ps: PersonalDetailsService
+        private ps: PersonalDetailsService,
+        private us: UtilsService
     ) {
         super();
     }
 
     ngOnInit() {
-        this.getCareerProfile();
         this.ps.careerProfileUpdated$
             .pipe(takeUntil(this.componentInView))
             .subscribe(profile => {
@@ -35,20 +31,6 @@ export class ProfileTasksComponent extends BaseComponent implements OnInit {
             })
     }
 
-    getCareerProfile(): void {
-        this.isLoading = true;
-        this.ps.getCareerProfile(this.assocs)
-            .pipe(takeUntil(this.componentInView))
-            .subscribe(response => {
-                this.careerProfile = response;
-                this.setProfileCompletion();
-                this.isLoading = false;
-            }, err => {
-                this.hs.handleHttpError(err);
-                this.isLoading = false;
-            })
-    }
-
     setProfileCompletion(): void {
         const percentage = (this.careerProfile.CompletedPercentage || 0) * 3.6;
         const degree =  percentage <= 180 ? 90 + percentage : percentage - 90;