feat: display information for B2B users above my account navigation (#…

…298)

src/app/core/facades/account.facade.ts

@@ -17,6 +17,7 @@ import {
   getAllAddresses,
   loadAddresses,
 } from 'ish-core/store/customer/addresses';
+import { getUserRoles } from 'ish-core/store/customer/authorization';
 import { getOrders, getOrdersLoading, getSelectedOrder, loadOrders } from 'ish-core/store/customer/orders';
 import {
   createUser,
@@ -60,6 +61,7 @@ export class AccountFacade {
   userError$ = this.store.pipe(select(getUserError));
   userLoading$ = this.store.pipe(select(getUserLoading));
   isLoggedIn$ = this.store.pipe(select(getUserAuthorized));
+  roles$ = this.store.pipe(select(getUserRoles));
 
   loginUser(credentials: Credentials) {
     this.store.dispatch(loginUser({ credentials }));

src/app/pages/account/account-navigation/account-navigation.component.html

@@ -1,5 +1,6 @@
 <ng-container *ngIf="!isMobileView; else mobileNavigation">
   <ul class="account-navigation list-unstyled" data-testing-id="myaccount-navigation">
+    <ish-account-user-info></ish-account-user-info>
     <ng-container *ngFor="let item of navigationItems | keyvalue: unsorted; let first = first">
       <ng-container *ishIsAuthorizedTo="item.value.permission || 'always'">
         <li

src/app/pages/account/account-navigation/account-navigation.component.spec.ts

@@ -1,13 +1,16 @@
 import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { TranslateModule } from '@ngx-translate/core';
+import { MockComponent } from 'ng-mocks';
 import { of } from 'rxjs';
 import { instance, mock, when } from 'ts-mockito';
 
 import { AuthorizationToggleModule } from 'ish-core/authorization-toggle.module';
 import { AccountFacade } from 'ish-core/facades/account.facade';
 import { FeatureToggleModule } from 'ish-core/feature-toggle.module';
 
+import { AccountUserInfoComponent } from '../account-user-info/account-user-info.component';
+
 import { AccountNavigationComponent } from './account-navigation.component';
 
 describe('Account Navigation Component', () => {
@@ -19,7 +22,7 @@ describe('Account Navigation Component', () => {
   beforeEach(async(() => {
     accountFacadeMock = mock(AccountFacade);
     TestBed.configureTestingModule({
-      declarations: [AccountNavigationComponent],
+      declarations: [AccountNavigationComponent, MockComponent(AccountUserInfoComponent)],
       imports: [
         AuthorizationToggleModule.forTesting('APP_B2B_MANAGE_USERS'),
         FeatureToggleModule.forTesting('quoting', 'orderTemplates'),

src/app/pages/account/account-page.module.ts

@@ -8,6 +8,7 @@ import { AccountOverviewPageModule } from '../account-overview/account-overview-
 
 import { AccountNavigationComponent } from './account-navigation/account-navigation.component';
 import { AccountPageComponent } from './account-page.component';
+import { AccountUserInfoComponent } from './account-user-info/account-user-info.component';
 
 const accountPageRoutes: Routes = [
   {
@@ -79,6 +80,6 @@ const accountPageRoutes: Routes = [
 
 @NgModule({
   imports: [AccountOverviewPageModule, RouterModule.forChild(accountPageRoutes), SharedModule],
-  declarations: [AccountNavigationComponent, AccountPageComponent],
+  declarations: [AccountNavigationComponent, AccountPageComponent, AccountUserInfoComponent],
 })
 export class AccountPageModule {}

src/app/pages/account/account-user-info/account-user-info.component.html

@@ -0,0 +1,16 @@
+<li *ngIf="isBusinessUser$ | async" class="account-welcome">
+  <ng-container *ngIf="user$ | async as user">
+    <ng-container *ngIf="user.lastName && user.firstName; else email">
+      <h4>{{ user.lastName }}, {{ user.firstName }}</h4>
+    </ng-container>
+    <ng-template #email>
+      <h4 class="ellipsis">{{ user.login }}</h4>
+    </ng-template>
+  </ng-container>
+  <p *ngIf="customer$ | async as customer">
+    <small>{{ customer.companyName }}</small>
+  </p>
+  <p *ngIf="roles$ | async as roles">
+    <small>{{ roles }}</small>
+  </p>
+</li>

src/app/pages/account/account-user-info/account-user-info.component.spec.ts

@@ -0,0 +1,78 @@
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { EMPTY, of } from 'rxjs';
+import { instance, mock, when } from 'ts-mockito';
+
+import { AccountFacade } from 'ish-core/facades/account.facade';
+import { Customer } from 'ish-core/models/customer/customer.model';
+import { User } from 'ish-core/models/user/user.model';
+
+import { AccountUserInfoComponent } from './account-user-info.component';
+
+describe('Account User Info Component', () => {
+  let component: AccountUserInfoComponent;
+  let fixture: ComponentFixture<AccountUserInfoComponent>;
+  let element: HTMLElement;
+  let accountFacade: AccountFacade;
+
+  beforeEach(async(() => {
+    accountFacade = mock(AccountFacade);
+    when(accountFacade.customer$).thenReturn(EMPTY);
+    when(accountFacade.roles$).thenReturn(EMPTY);
+
+    TestBed.configureTestingModule({
+      declarations: [AccountUserInfoComponent],
+      providers: [{ provide: AccountFacade, useFactory: () => instance(accountFacade) }],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AccountUserInfoComponent);
+    component = fixture.componentInstance;
+    element = fixture.nativeElement;
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+    expect(element).toBeTruthy();
+    expect(() => fixture.detectChanges()).not.toThrow();
+  });
+
+  it('should not render when user is private customer', () => {
+    when(accountFacade.customer$).thenReturn(of({ isBusinessCustomer: false } as Customer));
+
+    fixture.detectChanges();
+
+    expect(element).toMatchInlineSnapshot(`N/A`);
+  });
+
+  it('should render when user is business customer', () => {
+    when(accountFacade.customer$).thenReturn(of({ isBusinessCustomer: true, companyName: 'Foods Inc.' } as Customer));
+    when(accountFacade.user$).thenReturn(of({ firstName: 'Max', lastName: 'Mustermann' } as User));
+    when(accountFacade.roles$).thenReturn(of(['Approver', 'Buyer']));
+
+    fixture.detectChanges();
+
+    expect(element).toMatchInlineSnapshot(`
+      <li class="account-welcome">
+        <h4>Mustermann, Max</h4>
+        <p><small>Foods Inc.</small></p>
+        <p><small>Approver, Buyer</small></p>
+      </li>
+    `);
+  });
+
+  it('should display email when user has no name', () => {
+    when(accountFacade.customer$).thenReturn(of({ isBusinessCustomer: true, companyName: 'Foods Inc.' } as Customer));
+    when(accountFacade.user$).thenReturn(of({ login: 'max.mustermann@test.de' } as User));
+    when(accountFacade.roles$).thenReturn(EMPTY);
+
+    fixture.detectChanges();
+
+    expect(element).toMatchInlineSnapshot(`
+      <li class="account-welcome">
+        <h4 class="ellipsis">max.mustermann@test.de</h4>
+        <p><small>Foods Inc.</small></p>
+      </li>
+    `);
+  });
+});

src/app/pages/account/account-user-info/account-user-info.component.ts

@@ -0,0 +1,28 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { User } from '@sentry/browser';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+import { AccountFacade } from 'ish-core/facades/account.facade';
+import { Customer } from 'ish-core/models/customer/customer.model';
+
+@Component({
+  selector: 'ish-account-user-info',
+  templateUrl: './account-user-info.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AccountUserInfoComponent implements OnInit {
+  isBusinessUser$: Observable<boolean>;
+  user$: Observable<User>;
+  customer$: Observable<Customer>;
+  roles$: Observable<string>;
+
+  constructor(private accountFacade: AccountFacade) {}
+
+  ngOnInit() {
+    this.isBusinessUser$ = this.accountFacade.customer$.pipe(map(user => !!user?.isBusinessCustomer));
+    this.user$ = this.accountFacade.user$;
+    this.customer$ = this.accountFacade.customer$;
+    this.roles$ = this.accountFacade.roles$.pipe(map(a => a.join(', ')));
+  }
+}

src/styles/pages/account/account-navigation.scss

@@ -59,6 +59,12 @@
         color: $text-color-primary;
       }
     }
+
+    &.account-welcome {
+      &:hover {
+        background: $color-tertiary;
+      }
+    }
   }
 }