feat: add Quickorder Link for mobile view (#794)

e2e/cypress/integration/pages/header.module.ts

@@ -45,7 +45,7 @@ export class HeaderModule {
   }
 
   gotoQuickorder(wait: () => unknown = waitLoadingEnd) {
-    cy.get('a[rel="quick-order"]').click();
+    cy.get('a[rel="quick-order"]:visible').click();
     wait();
   }
 

src/app/extensions/quickorder/shared/header-quickorder/header-quickorder.component.html

@@ -1,4 +1,4 @@
-<div class="d-none d-md-block quick-order-links">
-  <fa-icon class="mr-2 text-primary align-middle" [icon]="['fas', 'fast-forward']"></fa-icon>
-  <a rel="quick-order" routerLink="/quick-order">{{ 'quickorder.page.link' | translate }}</a>
-</div>
+<a routerLink="/quick-order" rel="quick-order" class="quickorder-link">
+  <fa-icon class="header-icon" [icon]="['fas', 'fast-forward']"></fa-icon>
+  <span>{{ 'quickorder.page.link' | translate }}</span>
+</a>

src/app/shell/header/header-default/__snapshots__/header-default.component.spec.ts.snap

@@ -30,7 +30,7 @@ exports[`Header Default Component should render normal header adequately for des
       ng-reflect-view="small"
     ></ish-mini-basket>
   </div>
-  <div class="row align-items-center">
+  <div class="mid-header row align-items-center">
     <div class="col-md-3 logo-col">
       <div class="logo-wrapper">
         <a
@@ -96,7 +96,7 @@ exports[`Header Default Component should render normal header adequately for mob
       ng-reflect-view="small"
     ></ish-mini-basket>
   </div>
-  <div class="row align-items-center">
+  <div class="mid-header row align-items-center">
     <div class="col-md-3 logo-col">
       <div class="logo-wrapper">
         <a
@@ -155,7 +155,7 @@ exports[`Header Default Component should render normal header adequately for tab
       ng-reflect-view="small"
     ></ish-mini-basket>
   </div>
-  <div class="row align-items-center">
+  <div class="mid-header row align-items-center">
     <div class="col-md-3 logo-col">
       <div class="logo-wrapper">
         <a
@@ -213,7 +213,7 @@ exports[`Header Default Component should render sticky header adequately for des
       ng-reflect-view="small"
     ></ish-mini-basket>
   </div>
-  <div class="row align-items-center">
+  <div class="mid-header row align-items-center">
     <div class="col-md-3 logo-col">
       <div class="logo-wrapper">
         <a
@@ -267,7 +267,7 @@ exports[`Header Default Component should render sticky header adequately for mob
       ng-reflect-view="small"
     ></ish-mini-basket>
   </div>
-  <div class="row align-items-center">
+  <div class="mid-header row align-items-center">
     <div class="col-md-3 logo-col">
       <div class="logo-wrapper">
         <a
@@ -321,7 +321,7 @@ exports[`Header Default Component should render sticky header adequately for tab
       ng-reflect-view="small"
     ></ish-mini-basket>
   </div>
-  <div class="row align-items-center">
+  <div class="mid-header row align-items-center">
     <div class="col-md-3 logo-col">
       <div class="logo-wrapper">
         <a

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

@@ -53,7 +53,7 @@
       [ngClass]="isSticky ? 'd-lg-none' : 'd-md-none'"
     ></ish-mini-basket>
   </div>
-  <div class="row align-items-center">
+  <div class="mid-header row align-items-center">
     <div class="col-md-3 logo-col">
       <div class="logo-wrapper">
         <a

src/app/shell/header/user-information-mobile/user-information-mobile.component.html

@@ -4,6 +4,9 @@
   <div *ishFeature="'compare'" class="user-info-box-item">
     <ish-product-compare-status view="full"></ish-product-compare-status>
   </div>
+  <div *ishFeature="'quickorder'" class="user-info-box-item">
+    <ish-lazy-header-quickorder></ish-lazy-header-quickorder>
+  </div>
   <div *ishFeature="'wishlists'" class="user-info-box-item">
     <ish-lazy-wishlists-link view="full"></ish-lazy-wishlists-link>
   </div>

src/app/shell/header/user-information-mobile/user-information-mobile.component.spec.ts

@@ -7,6 +7,7 @@ import { LanguageSwitchComponent } from 'ish-shell/header/language-switch/langua
 import { LoginStatusComponent } from 'ish-shell/header/login-status/login-status.component';
 import { ProductCompareStatusComponent } from 'ish-shell/header/product-compare-status/product-compare-status.component';
 
+import { LazyHeaderQuickorderComponent } from '../../../extensions/quickorder/exports/lazy-header-quickorder/lazy-header-quickorder.component';
 import { LazyWishlistsLinkComponent } from '../../../extensions/wishlists/exports/lazy-wishlists-link/lazy-wishlists-link.component';
 
 import { UserInformationMobileComponent } from './user-information-mobile.component';
@@ -21,6 +22,7 @@ describe('User Information Mobile Component', () => {
       imports: [TranslateModule.forRoot()],
       declarations: [
         MockComponent(LanguageSwitchComponent),
+        MockComponent(LazyHeaderQuickorderComponent),
         MockComponent(LazyWishlistsLinkComponent),
         MockComponent(LoginStatusComponent),
         MockComponent(ProductCompareStatusComponent),

src/styles/components/header/header-sticky.scss

@@ -47,8 +47,10 @@
         }
       }
 
-      .quick-order-links {
-        display: none !important;
+      .mid-header {
+        .quickorder-link {
+          display: none !important;
+        }
       }
 
       .navbar-toggler {

src/styles/components/header/header.scss

@@ -69,6 +69,16 @@ header {
     }
   }
 
+  .mid-header {
+    .quickorder-link {
+      .header-icon {
+        font-size: $font-size-corporate;
+        color: $CORPORATE-PRIMARY;
+        vertical-align: middle;
+      }
+    }
+  }
+
   &.homepage {
     margin-bottom: 0;
   }