feat: add specific header component for error pages

* current difference to the simple header: logo link with reloading link instead of router link

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

@@ -8,7 +8,7 @@ import { ErrorComponent } from './error/error.component';
 import { ServerErrorComponent } from './server-error/server-error.component';
 
 const errorPageRoutes: Routes = [
-  { path: '', component: ErrorPageComponent, data: { wrapperClass: 'errorpage', headerType: 'simple' } },
+  { path: '', component: ErrorPageComponent, data: { wrapperClass: 'errorpage', headerType: 'error' } },
 ];
 
 @NgModule({

src/app/shell/header/header-error/header-error.component.html

@@ -0,0 +1,22 @@
+<div class="header header-error container">
+  <div class="mid-header">
+    <div class="logo-wrapper d-none d-md-block">
+      <a
+        rel="home"
+        [href]="homeHref"
+        class="logo"
+        [attr.aria-label]="'common.home.link' | translate"
+        data-testing-id="header-home-link-desktop"
+      ></a>
+    </div>
+    <div class="logo-wrapper d-md-none">
+      <a
+        rel="home"
+        [href]="homeHref"
+        class="mobile-logo"
+        [attr.aria-label]="'common.home.link' | translate"
+        data-testing-id="link-home"
+      ></a>
+    </div>
+  </div>
+</div>

src/app/shell/header/header-error/header-error.component.spec.ts

@@ -0,0 +1,31 @@
+import { APP_BASE_HREF } from '@angular/common';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { HeaderErrorComponent } from './header-error.component';
+
+describe('Header Error Component', () => {
+  let component: HeaderErrorComponent;
+  let fixture: ComponentFixture<HeaderErrorComponent>;
+  let element: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot()],
+      declarations: [HeaderErrorComponent],
+      providers: [{ provide: APP_BASE_HREF, useValue: '/' }],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeaderErrorComponent);
+    component = fixture.componentInstance;
+    element = fixture.nativeElement;
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+    expect(element).toBeTruthy();
+    expect(() => fixture.detectChanges()).not.toThrow();
+  });
+});

src/app/shell/header/header-error/header-error.component.ts

@@ -0,0 +1,20 @@
+import { APP_BASE_HREF } from '@angular/common';
+import { ChangeDetectionStrategy, Component, Inject, OnInit } from '@angular/core';
+
+/**
+ * The page header for error pages - the logo link reloads the app
+ */
+@Component({
+  selector: 'ish-header-error',
+  templateUrl: './header-error.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class HeaderErrorComponent implements OnInit {
+  constructor(@Inject(APP_BASE_HREF) private baseHref: string) {}
+
+  homeHref: string;
+
+  ngOnInit() {
+    this.homeHref = this.baseHref && this.baseHref !== '/' ? `${this.baseHref}/home` : '/home';
+  }
+}

src/app/shell/header/header/header.component.html

@@ -1,4 +1,5 @@
 <ng-container [ngSwitch]="headerType$ | async">
+  <ish-header-error *ngSwitchCase="'error'"></ish-header-error>
   <ish-header-simple *ngSwitchCase="'simple'"></ish-header-simple>
   <ish-header-checkout *ngSwitchCase="'checkout'"></ish-header-checkout>
 

src/app/shell/header/header/header.component.spec.ts

@@ -7,7 +7,9 @@ import { instance, mock, when } from 'ts-mockito';
 import { AppFacade } from 'ish-core/facades/app.facade';
 import { findAllCustomElements } from 'ish-core/utils/dev/html-query-utils';
 import { BackToTopComponent } from 'ish-shell/header/back-to-top/back-to-top.component';
+import { HeaderCheckoutComponent } from 'ish-shell/header/header-checkout/header-checkout.component';
 import { HeaderDefaultComponent } from 'ish-shell/header/header-default/header-default.component';
+import { HeaderErrorComponent } from 'ish-shell/header/header-error/header-error.component';
 import { HeaderSimpleComponent } from 'ish-shell/header/header-simple/header-simple.component';
 
 import { HeaderComponent } from './header.component';
@@ -27,7 +29,9 @@ describe('Header Component', () => {
       declarations: [
         HeaderComponent,
         MockComponent(BackToTopComponent),
+        MockComponent(HeaderCheckoutComponent),
         MockComponent(HeaderDefaultComponent),
+        MockComponent(HeaderErrorComponent),
         MockComponent(HeaderSimpleComponent),
       ],
       providers: [{ provide: AppFacade, useFactory: () => instance(appFacade) }],
@@ -66,4 +70,26 @@ describe('Header Component', () => {
       ]
     `);
   });
+
+  it('should render error header component if set', () => {
+    when(appFacade.headerType$).thenReturn(of('error'));
+    fixture.detectChanges();
+    expect(findAllCustomElements(element)).toMatchInlineSnapshot(`
+      Array [
+        "ish-header-error",
+        "ish-back-to-top",
+      ]
+    `);
+  });
+
+  it('should render checkout header component if set', () => {
+    when(appFacade.headerType$).thenReturn(of('checkout'));
+    fixture.detectChanges();
+    expect(findAllCustomElements(element)).toMatchInlineSnapshot(`
+      Array [
+        "ish-header-checkout",
+        "ish-back-to-top",
+      ]
+    `);
+  });
 });

src/app/shell/shell.module.ts

@@ -25,6 +25,7 @@ import { FooterComponent } from './footer/footer/footer.component';
 import { BackToTopComponent } from './header/back-to-top/back-to-top.component';
 import { HeaderCheckoutComponent } from './header/header-checkout/header-checkout.component';
 import { HeaderDefaultComponent } from './header/header-default/header-default.component';
+import { HeaderErrorComponent } from './header/header-error/header-error.component';
 import { HeaderNavigationComponent } from './header/header-navigation/header-navigation.component';
 import { HeaderSimpleComponent } from './header/header-simple/header-simple.component';
 import { HeaderComponent } from './header/header/header.component';
@@ -66,6 +67,7 @@ const exportedComponents = [CookiesBannerComponent, FooterComponent, HeaderCompo
     CookiesBannerComponent,
     HeaderCheckoutComponent,
     HeaderDefaultComponent,
+    HeaderErrorComponent,
     HeaderNavigationComponent,
     HeaderSimpleComponent,
     LanguageSwitchComponent,

src/styles/components/header/header.scss

@@ -194,6 +194,7 @@ header {
   background-size: $logo-mobile-width $logo-mobile-height;
 }
 
+header .header-error,
 header .header-simple,
 header .header-checkout {
   .header-utility {