From 755e19e70049b6b9baa1803c507df3c43e85a65f Mon Sep 17 00:00:00 2001
From: "max.kless@googlemail.com" <max.kless@googlemail.com>
Date: Tue, 1 Feb 2022 09:48:06 +0100
Subject: [PATCH] use scroll directive

---
 .../basket-validation-results.component.html  | 31 ++++++++++++++++---
 ...asket-validation-results.component.spec.ts |  4 ++-
 .../basket-validation-results.component.ts    |  4 +++
 3 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/src/app/shared/components/basket/basket-validation-results/basket-validation-results.component.html b/src/app/shared/components/basket/basket-validation-results/basket-validation-results.component.html
index c512267aadc..e4b2084329a 100644
--- a/src/app/shared/components/basket/basket-validation-results/basket-validation-results.component.html
+++ b/src/app/shared/components/basket/basket-validation-results/basket-validation-results.component.html
@@ -1,8 +1,11 @@
 <!-- error messages -->
 <div
-  *ngFor="let message of errorMessages$ | async"
+  *ngFor="let message of errorMessages$ | async; let first = first"
   class="alert alert-danger"
   role="alert"
+  [ishScroll]="first"
+  [scrollDuration]="scrollDuration"
+  [scrollSpacing]="scrollSpacing"
   data-testing-id="validation-error-message"
 >
   {{ message }}
@@ -10,15 +13,25 @@
 
 <!-- info messages -->
 <div
-  *ngFor="let message of infoMessages$ | async"
+  *ngFor="let message of infoMessages$ | async; let first = first"
   class="alert alert-info"
   role="alert"
+  [ishScroll]="first"
+  [scrollDuration]="scrollDuration"
+  [scrollSpacing]="scrollSpacing"
   data-testing-id="validation-info-message"
 >
   {{ message }}
 </div>
 
-<div *ngIf="hasGeneralBasketError$ | async" class="alert alert-danger" data-testing-id="general-validation-message">
+<div
+  *ngIf="hasGeneralBasketError$ | async"
+  class="alert alert-danger"
+  [ishScroll]="true"
+  [scrollDuration]="scrollDuration"
+  [scrollSpacing]="scrollSpacing"
+  data-testing-id="general-validation-message"
+>
   {{ 'basket.validation.general.error' | translate }}
 </div>
 
@@ -28,6 +41,9 @@
     *ngIf="undeliverableItems.length"
     class="alert alert-box"
     role="alert"
+    [ishScroll]="true"
+    [scrollDuration]="scrollDuration"
+    [scrollSpacing]="scrollSpacing"
     data-testing-id="undeliverable-items-message"
   >
     <div class="alert-box-header">
@@ -49,7 +65,14 @@
 
 <!-- removed items messages -->
 <ng-container *ngIf="removedItems$ | async as removedItems">
-  <div *ngIf="removedItems.length" class="alert alert-danger" data-testing-id="validation-removed-message">
+  <div
+    *ngIf="removedItems.length"
+    class="alert alert-danger"
+    [ishScroll]="true"
+    [scrollDuration]="scrollDuration"
+    [scrollSpacing]="scrollSpacing"
+    data-testing-id="validation-removed-message"
+  >
     {{ 'shopping_cart.adjusted_items.warnung' | translate }}
   </div>
   <ish-basket-validation-products [items]="removedItems"></ish-basket-validation-products>
diff --git a/src/app/shared/components/basket/basket-validation-results/basket-validation-results.component.spec.ts b/src/app/shared/components/basket/basket-validation-results/basket-validation-results.component.spec.ts
index 953296324f7..912d969b34a 100644
--- a/src/app/shared/components/basket/basket-validation-results/basket-validation-results.component.spec.ts
+++ b/src/app/shared/components/basket/basket-validation-results/basket-validation-results.component.spec.ts
@@ -1,9 +1,10 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule } from '@ngx-translate/core';
-import { MockComponent } from 'ng-mocks';
+import { MockComponent, MockDirective } from 'ng-mocks';
 import { of } from 'rxjs';
 import { anyString, instance, mock, verify, when } from 'ts-mockito';
 
+import { ScrollDirective } from 'ish-core/directives/scroll.directive';
 import { CheckoutFacade } from 'ish-core/facades/checkout.facade';
 import { BasketValidationResultType } from 'ish-core/models/basket-validation/basket-validation.model';
 import { BasketValidationItemsComponent } from 'ish-shared/components/basket/basket-validation-items/basket-validation-items.component';
@@ -26,6 +27,7 @@ describe('Basket Validation Results Component', () => {
         BasketValidationResultsComponent,
         MockComponent(BasketValidationItemsComponent),
         MockComponent(BasketValidationProductsComponent),
+        MockDirective(ScrollDirective),
       ],
       imports: [TranslateModule.forRoot()],
       providers: [{ provide: CheckoutFacade, useFactory: () => instance(checkoutFacadeMock) }],
diff --git a/src/app/shared/components/basket/basket-validation-results/basket-validation-results.component.ts b/src/app/shared/components/basket/basket-validation-results/basket-validation-results.component.ts
index 2c49e2c53aa..4ec1cb16abc 100644
--- a/src/app/shared/components/basket/basket-validation-results/basket-validation-results.component.ts
+++ b/src/app/shared/components/basket/basket-validation-results/basket-validation-results.component.ts
@@ -31,6 +31,10 @@ export class BasketValidationResultsComponent implements OnInit, OnDestroy {
 
   itemHasBeenRemoved = false;
 
+  // default values to controll scrolling behavior
+  scrollDuration = 500;
+  scrollSpacing = 64;
+
   private destroy$ = new Subject();
 
   constructor(private checkoutFacade: CheckoutFacade) {}