From b06ac13ec9091d27cd5bf1d42b699717f8d239a3 Mon Sep 17 00:00:00 2001
From: Carola Bratsch <cbratsch@intershop.de>
Date: Thu, 22 Jul 2021 14:30:00 +0200
Subject: [PATCH] feat: add Quickorder Link for mobile view (#794)

---
 e2e/cypress/integration/pages/header.module.ts       |  2 +-
 .../header-quickorder.component.html                 |  8 ++++----
 .../header-default.component.spec.ts.snap            | 12 ++++++------
 .../header-default/header-default.component.html     |  2 +-
 .../user-information-mobile.component.html           |  3 +++
 .../user-information-mobile.component.spec.ts        |  2 ++
 src/styles/components/header/header-sticky.scss      |  6 ++++--
 src/styles/components/header/header.scss             | 10 ++++++++++
 8 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/e2e/cypress/integration/pages/header.module.ts b/e2e/cypress/integration/pages/header.module.ts
index 40e9456113..a4fe5042dc 100644
--- a/e2e/cypress/integration/pages/header.module.ts
+++ b/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();
   }
 
diff --git a/src/app/extensions/quickorder/shared/header-quickorder/header-quickorder.component.html b/src/app/extensions/quickorder/shared/header-quickorder/header-quickorder.component.html
index acc0397f02..352fce2068 100644
--- a/src/app/extensions/quickorder/shared/header-quickorder/header-quickorder.component.html
+++ b/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>
diff --git a/src/app/shell/header/header-default/__snapshots__/header-default.component.spec.ts.snap b/src/app/shell/header/header-default/__snapshots__/header-default.component.spec.ts.snap
index 94514ee440..50e3569bc8 100644
--- a/src/app/shell/header/header-default/__snapshots__/header-default.component.spec.ts.snap
+++ b/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
diff --git a/src/app/shell/header/header-default/header-default.component.html b/src/app/shell/header/header-default/header-default.component.html
index 5b91185a56..76a120b8be 100644
--- a/src/app/shell/header/header-default/header-default.component.html
+++ b/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
diff --git a/src/app/shell/header/user-information-mobile/user-information-mobile.component.html b/src/app/shell/header/user-information-mobile/user-information-mobile.component.html
index 14e1dc883c..1d4551b878 100644
--- a/src/app/shell/header/user-information-mobile/user-information-mobile.component.html
+++ b/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>
diff --git a/src/app/shell/header/user-information-mobile/user-information-mobile.component.spec.ts b/src/app/shell/header/user-information-mobile/user-information-mobile.component.spec.ts
index d9e914b539..47d900a44f 100644
--- a/src/app/shell/header/user-information-mobile/user-information-mobile.component.spec.ts
+++ b/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),
diff --git a/src/styles/components/header/header-sticky.scss b/src/styles/components/header/header-sticky.scss
index 836af79612..1d64873a14 100644
--- a/src/styles/components/header/header-sticky.scss
+++ b/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 {
diff --git a/src/styles/components/header/header.scss b/src/styles/components/header/header.scss
index bb43ea8492..06358124d8 100644
--- a/src/styles/components/header/header.scss
+++ b/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;
   }