Update Matomo Docker Konfiguration

#4760 Fehler bei Abholpreisberechnung in Filiale Darmstadt Ernst-Ludwig-Straße

.gitignore

@@ -1,5 +1,7 @@
 # See http://help.github.com/ignore-files/ for more about ignoring files.
 
+.matomo
+
 # compiled output
 /dist
 /tmp

.husky/pre-commit

@@ -0,0 +1 @@
+npm run pretty-quick

TASKS.md

@@ -1,4 +0,0 @@
-- Neue Icon Module (z.B. mit SVG sprites)
-- Breadcrumb Navigation (Neu)
-- Remissions Produkt Liste (Refactoring / Neu)
-- Angular Version (Upgrade)

angular.json

@@ -2,6 +2,7 @@
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
   "newProjectRoot": "apps",
+  
   "projects": {
     "@swagger/availability": {
       "root": "apps/swagger/availability",
@@ -959,10 +960,10 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "isa-app:build:production"
+              "buildTarget": "isa-app:build:production"
             },
             "development": {
-              "browserTarget": "isa-app:build:development"
+              "buildTarget": "isa-app:build:development"
             }
           },
           "defaultConfiguration": "development"
@@ -970,7 +971,7 @@
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "isa-app:build"
+            "buildTarget": "isa-app:build"
           }
         },
         "test": {
@@ -1470,39 +1471,6 @@
           }
         }
       }
-    },
-    "shell": {
-      "projectType": "library",
-      "root": "apps/shell",
-      "sourceRoot": "apps/shell/src",
-      "prefix": "shell",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:ng-packagr",
-          "options": {
-            "project": "apps/shell/ng-package.json"
-          },
-          "configurations": {
-            "production": {
-              "tsConfig": "apps/shell/tsconfig.lib.prod.json"
-            },
-            "development": {
-              "tsConfig": "apps/shell/tsconfig.lib.json"
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "tsConfig": "apps/shell/tsconfig.spec.json",
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ]
-          }
-        }
-      }
     }
   },
   "cli": {

apps/cdn/product-image/src/lib/product-image-navigation.directive.ts

@@ -0,0 +1,31 @@
+import { Directive, HostListener, Input } from '@angular/core';
+import { ProductCatalogNavigationService } from '@shared/services';
+
+@Directive({
+  selector: '[productImageNavigation]',
+  standalone: true,
+})
+export class NavigateOnClickDirective {
+  @Input('productImageNavigation') ean: string;
+
+  constructor(private readonly _productCatalogNavigation: ProductCatalogNavigationService) {}
+
+  @HostListener('click', ['$event'])
+  async onClick(event: MouseEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+    if (this.ean) {
+      await this._navigateToProductSearchDetails();
+    }
+  }
+
+  private async _navigateToProductSearchDetails() {
+    await this._productCatalogNavigation
+      .getArticleDetailsPathByEan({
+        processId: Date.now(),
+        ean: this.ean,
+        extras: { queryParams: { main_qs: this.ean } },
+      })
+      .navigate();
+  }
+}

apps/cdn/product-image/src/public-api.ts

@@ -5,4 +5,5 @@
 export * from './lib/product-image.service';
 export * from './lib/product-image.module';
 export * from './lib/product-image.pipe';
+export * from './lib/product-image-navigation.directive';
 export * from './lib/tokens';

apps/domain/availability/src/lib/availability.service.ts

@@ -36,7 +36,7 @@ export class DomainAvailabilityService {
     private _logisticanService: LogisticianService,
     private _stockService: StockService,
     private _supplierService: StoreCheckoutSupplierService,
-    private _branchService: StoreCheckoutBranchService
+    private _branchService: StoreCheckoutBranchService,
   ) {}
 
   @memorize({ ttl: 10000 })
@@ -48,7 +48,7 @@ export class DomainAvailabilityService {
   getSuppliers(): Observable<SupplierDTO[]> {
     return this._supplierService.StoreCheckoutSupplierGetSuppliers({}).pipe(
       map((response) => response.result),
-      shareReplay(1)
+      shareReplay(1),
     );
   }
 
@@ -56,7 +56,7 @@ export class DomainAvailabilityService {
   getTakeAwaySupplier(): Observable<SupplierDTO> {
     return this._supplierService.StoreCheckoutSupplierGetSuppliers({}).pipe(
       map(({ result }) => result?.find((supplier) => supplier?.supplierNumber === 'F')),
-      shareReplay(1)
+      shareReplay(1),
     );
   }
 
@@ -64,7 +64,7 @@ export class DomainAvailabilityService {
   getBranches(): Observable<BranchDTO[]> {
     return this._branchService.StoreCheckoutBranchGetBranches({}).pipe(
       map((response) => response.result),
-      shareReplay(1)
+      shareReplay(1),
     );
   }
 
@@ -73,7 +73,7 @@ export class DomainAvailabilityService {
     return this._stockService.StockGetStocksByBranch({ branchId }).pipe(
       map((response) => response.result),
       map((result) => result?.find((_) => true)),
-      shareReplay(1)
+      shareReplay(1),
     );
   }
 
@@ -81,7 +81,7 @@ export class DomainAvailabilityService {
   getDefaultStock(): Observable<StockDTO> {
     return this._stockService.StockCurrentStock().pipe(
       map((response) => response.result),
-      shareReplay(1)
+      shareReplay(1),
     );
   }
 
@@ -105,7 +105,7 @@ export class DomainAvailabilityService {
         status: response.result.status,
         version: response.result.version,
       })),
-      shareReplay(1)
+      shareReplay(1),
     );
   }
 
@@ -113,7 +113,7 @@ export class DomainAvailabilityService {
   getLogisticians(): Observable<LogisticianDTO> {
     return this._logisticanService.LogisticianGetLogisticians({}).pipe(
       map((response) => response.result?.find((l) => l.logisticianNumber === '2470')),
-      shareReplay(1)
+      shareReplay(1),
     );
   }
 
@@ -146,7 +146,7 @@ export class DomainAvailabilityService {
         });
         return availabilities;
       }),
-      shareReplay(1)
+      shareReplay(1),
     );
   }
 
@@ -167,13 +167,13 @@ export class DomainAvailabilityService {
           this._stockService.StockInStock({ articleIds: [item.itemId], stockId: s.id }),
           this.getTakeAwaySupplier(),
           this.getDefaultBranch(),
-        ])
+        ]),
       ),
       map(([response, supplier, defaultBranch]) => {
         const price = item?.price;
         return this._mapToTakeAwayAvailability({ response, supplier, branchId: branch?.id ?? defaultBranch?.id, quantity, price });
       }),
-      shareReplay(1)
+      shareReplay(1),
     );
   }
 
@@ -196,7 +196,7 @@ export class DomainAvailabilityService {
       map(([response, supplier]) => {
         return this._mapToTakeAwayAvailability({ response, supplier, branchId: branch.id, quantity, price });
       }),
-      shareReplay(1)
+      shareReplay(1),
     );
   }
 
@@ -218,7 +218,7 @@ export class DomainAvailabilityService {
       map(([response, supplier, defaultBranch]) => {
         return this._mapToTakeAwayAvailability({ response, supplier, branchId: branchId ?? defaultBranch.id, quantity, price });
       }),
-      shareReplay(1)
+      shareReplay(1),
     );
   }
 
@@ -228,7 +228,7 @@ export class DomainAvailabilityService {
       switchMap((s) => this._stockService.StockInStockByEAN({ eans: eansFiltered, stockId: s.id })),
       withLatestFrom(this.getTakeAwaySupplier(), this.getDefaultBranch()),
       map((response) => response[0].result),
-      shareReplay(1)
+      shareReplay(1),
     );
   }
 
@@ -254,7 +254,7 @@ export class DomainAvailabilityService {
       ])
       .pipe(
         map((r) => this._mapToPickUpAvailability(r.result)?.find((_) => true)),
-        shareReplay(1)
+        shareReplay(1),
       );
   }
 
@@ -270,7 +270,7 @@ export class DomainAvailabilityService {
     ]).pipe(
       timeout(5000),
       map((r) => this._mapToShippingAvailability(r.result)?.find((_) => true)),
-      shareReplay(1)
+      shareReplay(1),
     );
   }
 
@@ -305,7 +305,7 @@ export class DomainAvailabilityService {
           priceMaintained: preferred?.priceMaintained,
         };
       }),
-      shareReplay(1)
+      shareReplay(1),
     );
   }
 
@@ -329,12 +329,12 @@ export class DomainAvailabilityService {
         this.getPickUpAvailability({ item, quantity, branch: branch ?? defaultBranch }).pipe(
           mergeMap((availability) =>
             logistician$.pipe(
-              map((logistician) => ({ ...(availability?.length > 0 ? availability[0] : []), logistician: { id: logistician.id } }))
-            )
+              map((logistician) => ({ ...(availability?.length > 0 ? availability[0] : []), logistician: { id: logistician.id } })),
+            ),
           ),
-          shareReplay(1)
-        )
-      )
+          shareReplay(1),
+        ),
+      ),
     );
   }
 
@@ -367,7 +367,7 @@ export class DomainAvailabilityService {
           priceMaintained: preferred?.priceMaintained,
         };
       }),
-      shareReplay(1)
+      shareReplay(1),
     );
   }
 
@@ -378,7 +378,7 @@ export class DomainAvailabilityService {
       switchMap((stockId) =>
         stockId
           ? this._stockService.StockInStock({ articleIds: items.map((i) => i.id), stockId })
-          : of({ result: [] } as ResponseArgsOfIEnumerableOfStockInfoDTO)
+          : of({ result: [] } as ResponseArgsOfIEnumerableOfStockInfoDTO),
       ),
       timeout(20000),
       withLatestFrom(this.getTakeAwaySupplier()),
@@ -389,10 +389,10 @@ export class DomainAvailabilityService {
             supplier,
             quantity: 1,
             price: items?.find((i) => i.id === stockInfo.itemId)?.price,
-          })
+          }),
         );
       }),
-      shareReplay(1)
+      shareReplay(1),
     );
   }
 
@@ -400,7 +400,7 @@ export class DomainAvailabilityService {
   getPickUpAvailabilities(payload: AvailabilityRequestDTO[], preferred?: boolean) {
     return this._availabilityService.AvailabilityStoreAvailability(payload).pipe(
       timeout(20000),
-      map((response) => (preferred ? this._mapToPickUpAvailability(response.result) : response.result))
+      map((response) => (preferred ? this._mapToPickUpAvailability(response.result) : response.result)),
     );
   }
 
@@ -408,7 +408,7 @@ export class DomainAvailabilityService {
   getDeliveryAvailabilities(payload: AvailabilityRequestDTO[]) {
     return this.memorizedAvailabilityShippingAvailability(payload).pipe(
       timeout(20000),
-      map((response) => this._mapToShippingAvailability(response.result))
+      map((response) => this._mapToShippingAvailability(response.result)),
     );
   }
 
@@ -416,7 +416,7 @@ export class DomainAvailabilityService {
   getDigDeliveryAvailabilities(payload: AvailabilityRequestDTO[]) {
     return this.memorizedAvailabilityShippingAvailability(payload).pipe(
       timeout(20000),
-      map((response) => this._mapToShippingAvailability(response.result))
+      map((response) => this._mapToShippingAvailability(response.result)),
     );
   }
 
@@ -427,16 +427,16 @@ export class DomainAvailabilityService {
     return this.getPickUpAvailabilities(payload, true).pipe(
       timeout(20000),
       switchMap((availability) =>
-        logistician$.pipe(map((logistician) => ({ availability: [...availability], logistician: { id: logistician.id } })))
+        logistician$.pipe(map((logistician) => ({ availability: [...availability], logistician: { id: logistician.id } }))),
       ),
-      shareReplay(1)
+      shareReplay(1),
     );
   }
 
   getPriceForAvailability(
     purchasingOption: string,
     catalogAvailability: CatAvailabilityDTO | AvailabilityDTO,
-    availability: AvailabilityDTO
+    availability: AvailabilityDTO,
   ): PriceDTO {
     switch (purchasingOption) {
       case 'take-away':
@@ -458,10 +458,6 @@ export class DomainAvailabilityService {
     return [2, 32, 256, 1024, 2048, 4096].some((code) => availability?.availabilityType === code);
   }
 
-  private _priceIsEmpty(price: PriceDTO) {
-    return isEmpty(price?.value) || isEmpty(price?.vat);
-  }
-
   private _mapToTakeAwayAvailability({
     response,
     supplier,
@@ -482,7 +478,7 @@ export class DomainAvailabilityService {
       inStock: inStock,
       supplierSSC: quantity <= inStock ? '999' : '',
       supplierSSCText: quantity <= inStock ? 'Filialentnahme' : '',
-      price: this._priceIsEmpty(price) ? stockInfo?.retailPrice : price,
+      price: stockInfo?.retailPrice ?? price, // #4553 Es soll nun immer der retailPrice aus der InStock Abfrage verwendet werden, egal ob "price" empty ist oder nicht
       supplier: { id: supplier?.id },
       // TODO: Change after API Update
       // LH: 2021-03-09 preis Property hat nun ein Fallback auf retailPrice
@@ -571,12 +567,12 @@ export class DomainAvailabilityService {
     if (!params.branchId) {
       branchId$ = this.getDefaultBranch().pipe(
         first(),
-        map((b) => b.id)
+        map((b) => b.id),
       );
     }
 
     const stock$ = branchId$.pipe(
-      mergeMap((branchId) => this._stockService.StockGetStocksByBranch({ branchId }).pipe(map((response) => response.result?.[0])))
+      mergeMap((branchId) => this._stockService.StockGetStocksByBranch({ branchId }).pipe(map((response) => response.result?.[0]))),
     );
 
     return stock$.pipe(
@@ -593,17 +589,17 @@ export class DomainAvailabilityService {
               acc[stockInfo.ean] = stockInfo;
               return acc;
             }, {});
-          })
-        )
-      )
+          }),
+        ),
+      ),
     );
   }
 
   getInStock({ itemIds, branchId }: { itemIds: number[]; branchId: number }): Observable<StockInfoDTO[]> {
     return this.getStockByBranch(branchId).pipe(
       mergeMap((stock) =>
-        this._stockService.StockInStock({ articleIds: itemIds, stockId: stock.id }).pipe(map((response) => response.result))
-      )
+        this._stockService.StockInStock({ articleIds: itemIds, stockId: stock.id }).pipe(map((response) => response.result)),
+      ),
     );
   }
 }

apps/domain/catalog/src/lib/thumbnail-url.pipe.ts

@@ -11,7 +11,7 @@ export class ThumbnailUrlPipe implements PipeTransform, OnDestroy {
   private input$ = new BehaviorSubject<{ width?: number; height?: number; ean?: string }>(undefined);
   private result: string;
 
-  private onDestroy$ = new Subject();
+  private onDestroy$ = new Subject<void>();
 
   constructor(private domainCatalogThumbnailService: DomainCatalogThumbnailService, private cdr: ChangeDetectorRef) {}
 

apps/domain/checkout/src/lib/checkout.service.ts

@@ -1021,7 +1021,11 @@ export class DomainCheckoutService {
 
   //#region Common
 
-  @memorize()
+  // Fix für Ticket #4619 Versand Artikel im Warenkob -> keine Änderung bei Kundendaten erfassen
+  // Auskommentiert, da dieser Aufruf oftmals mit gleichen Parametern aufgerufen wird (ohne ausgewählten Kunden nur ein leeres Objekt bei customerFeatures)
+  // memorize macht keinen deepCompare von Objekten und denkt hier, dass immer der gleiche Return Wert zurückkommt, allerdings ist das hier oft nicht der Fall
+  // und der Decorator memorized dann fälschlicherweise
+  // @memorize()
   canSetCustomer({
     processId,
     customerFeatures,

apps/domain/oms/src/lib/action-handlers/print-compartment-label.action-handler.ts

@@ -1,37 +1,60 @@
 import { Injectable } from '@angular/core';
 import { ActionHandler } from '@core/command';
-import { DomainPrinterService } from '@domain/printer';
+import { DomainPrinterService, Printer } from '@domain/printer';
 import { PrintModalComponent, PrintModalData } from '@modal/printer';
 import { UiModalService } from '@ui/modal';
 import { NativeContainerService } from 'native-container';
 import { OrderItemsContext } from './order-items.context';
+import { EnvironmentService } from '@core/environment';
 
 @Injectable()
 export class PrintCompartmentLabelActionHandler extends ActionHandler<OrderItemsContext> {
   constructor(
     private uiModal: UiModalService,
     private domainPrinterService: DomainPrinterService,
-    private nativeContainerService: NativeContainerService
+    private nativeContainerService: NativeContainerService,
+    private _environmentSerivce: EnvironmentService
   ) {
     super('PRINT_COMPARTMENTLABEL');
   }
+  printCompartmentLabelHelper(printer: string, orderItemSubsetIds: number[]) {
+    return this.domainPrinterService
+      .printCompartmentLabel({
+        printer,
+        orderItemSubsetIds,
+      })
+      .toPromise();
+  }
 
   async handler(data: OrderItemsContext): Promise<OrderItemsContext> {
-    await this.uiModal
-      .open({
-        content: PrintModalComponent,
-        config: { showScrollbarY: false },
-        data: {
-          printImmediately: !this.nativeContainerService.isNative,
-          printerType: 'Label',
-          print: (printer) =>
-            this.domainPrinterService
-              .printCompartmentLabel({ printer, orderItemSubsetIds: data.items.map((item) => item.orderItemSubsetId) })
-              .toPromise(),
-        } as PrintModalData,
-      })
-      .afterClosed$.toPromise();
+    const printerList = await this.domainPrinterService.getAvailableLabelPrinters().toPromise();
+    let printer: Printer;
 
+    if (Array.isArray(printerList)) {
+      printer = printerList.find((printer) => printer.selected === true);
+    }
+    if (!printer || this._environmentSerivce.matchTablet()) {
+      await this.uiModal
+        .open({
+          content: PrintModalComponent,
+          config: { showScrollbarY: false },
+          data: {
+            printImmediately: !this._environmentSerivce.matchTablet(),
+            printerType: 'Label',
+            print: (printer) =>
+              this.printCompartmentLabelHelper(
+                printer,
+                data.items.map((item) => item.orderItemSubsetId)
+              ),
+          } as PrintModalData,
+        })
+        .afterClosed$.toPromise();
+    } else {
+      await this.printCompartmentLabelHelper(
+        printer.key,
+        data.items.map((item) => item.orderItemSubsetId)
+      );
+    }
     return data;
   }
 }

apps/domain/oms/src/lib/action-handlers/print-shipping-note.action-handler.ts

@@ -6,45 +6,60 @@ import { UiModalService } from '@ui/modal';
 import { PrintModalComponent, PrintModalData } from '@modal/printer';
 import { groupBy } from '@ui/common';
 import { NativeContainerService } from 'native-container';
+import { ReceiptDTO } from '@swagger/oms';
+import { EnvironmentService } from '@core/environment';
 
 @Injectable()
 export class PrintShippingNoteActionHandler extends ActionHandler<OrderItemsContext> {
   constructor(
     private uiModal: UiModalService,
     private domainPrinterService: DomainPrinterService,
-    private nativeContainerService: NativeContainerService
+    private nativeContainerService: NativeContainerService,
+    private _environmentSerivce: EnvironmentService
   ) {
     super('PRINT_SHIPPINGNOTE');
   }
 
+  async printShippingNoteHelper(printer: string, receipts: ReceiptDTO[]) {
+    try {
+      for (const group of groupBy(receipts, (receipt) => receipt?.buyer?.buyerNumber)) {
+        await this.domainPrinterService.printShippingNote({ printer, receipts: group?.items?.map((r) => r?.id) }).toPromise();
+      }
+      return {
+        error: false,
+      };
+    } catch (error) {
+      console.error(error);
+      return {
+        error: true,
+        message: error?.message || error,
+      };
+    }
+  }
+
   async handler(data: OrderItemsContext): Promise<OrderItemsContext> {
-    await this.uiModal
-      .open({
-        content: PrintModalComponent,
-        config: { showScrollbarY: false },
-        data: {
-          printImmediately: !this.nativeContainerService.isNative,
-          printerType: 'Label',
-          print: async (printer) => {
-            try {
-              const receipts = data?.receipts?.filter((r) => r?.receiptType & 1);
-              for (const group of groupBy(receipts, (receipt) => receipt?.buyer?.buyerNumber)) {
-                await this.domainPrinterService.printShippingNote({ printer, receipts: group?.items?.map((r) => r?.id) }).toPromise();
-              }
-              return {
-                error: false,
-              };
-            } catch (error) {
-              console.error(error);
-              return {
-                error: true,
-                message: error?.message || error,
-              };
-            }
-          },
-        } as PrintModalData,
-      })
-      .afterClosed$.toPromise();
+    const printerList = await this.domainPrinterService.getAvailableLabelPrinters().toPromise();
+    const receipts = data?.receipts?.filter((r) => r?.receiptType & 1);
+    let printer: Printer;
+
+    if (Array.isArray(printerList)) {
+      printer = printerList.find((printer) => printer.selected === true);
+    }
+    if (!printer || this._environmentSerivce.matchTablet()) {
+      await this.uiModal
+        .open({
+          content: PrintModalComponent,
+          config: { showScrollbarY: false },
+          data: {
+            printImmediately: !this.nativeContainerService.isNative,
+            printerType: 'Label',
+            print: async (printer) => await this.printShippingNoteHelper(printer, receipts),
+          } as PrintModalData,
+        })
+        .afterClosed$.toPromise();
+    } else {
+      await this.printShippingNoteHelper(printer.key, receipts);
+    }
 
     return data;
   }

apps/domain/pickup-shelf/src/lib/pickup-shelf-in.service.ts

@@ -2,11 +2,16 @@ import { Injectable, inject } from '@angular/core';
 import { AbholfachService, AutocompleteTokenDTO, ListResponseArgsOfDBHOrderItemListItemDTO, QueryTokenDTO } from '@swagger/oms';
 import { PickupShelfIOService } from './pickup-shelf-io.service';
 import { Observable, throwError } from 'rxjs';
+import { Filter } from '@shared/components/filter';
 
 @Injectable({ providedIn: 'root' })
 export class PickupShelfInService extends PickupShelfIOService {
   private _abholfachService = inject(AbholfachService);
 
+  name() {
+    return 'PickupShelfInService';
+  }
+
   getQuerySettings() {
     return this._abholfachService.AbholfachWareneingangQuerySettings();
   }
@@ -22,6 +27,7 @@ export class PickupShelfInService extends PickupShelfIOService {
   getOrderItemsByOrderNumberOrCompartmentCode(args: {
     orderNumber?: string;
     compartmentCode?: string;
+    filter?: Filter;
   }): Observable<ListResponseArgsOfDBHOrderItemListItemDTO> {
     if (!args.orderNumber && !args.compartmentCode) {
       return throwError(
@@ -29,13 +35,16 @@ export class PickupShelfInService extends PickupShelfIOService {
       );
     }
 
+    const { orderdate } = args.filter?.getQueryToken()?.filter ?? {};
+
     return this._abholfachService.AbholfachWareneingang({
       input: {
         qs: args.compartmentCode ?? args.orderNumber,
       },
       filter: {
+        archive: String(true),
         all_branches: String(true),
-        archive: String(false),
+        orderdate,
       },
     });
   }

apps/domain/pickup-shelf/src/lib/pickup-shelf-io.service.ts

@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { Filter } from '@shared/components/filter';
 import {
   AutocompleteTokenDTO,
   ListResponseArgsOfDBHOrderItemListItemDTO,
@@ -10,6 +11,8 @@ import { Observable } from 'rxjs';
 
 @Injectable()
 export abstract class PickupShelfIOService {
+  abstract name(): string;
+
   abstract getQuerySettings(): Observable<ResponseArgsOfQuerySettingsDTO>;
 
   abstract search(queryToken: QueryTokenDTO): Observable<ListResponseArgsOfDBHOrderItemListItemDTO>;
@@ -19,6 +22,7 @@ export abstract class PickupShelfIOService {
   abstract getOrderItemsByOrderNumberOrCompartmentCode(args: {
     orderNumber?: string;
     compartmentCode?: string;
+    filter?: Filter;
   }): Observable<ListResponseArgsOfDBHOrderItemListItemDTO>;
 
   abstract getOrderItemsByCustomerNumber(args: { customerNumber: string }): Observable<ListResponseArgsOfDBHOrderItemListItemDTO>;

apps/domain/pickup-shelf/src/lib/pickup-shelf-out.service.ts

@@ -2,11 +2,16 @@ import { Injectable, inject } from '@angular/core';
 import { AbholfachService, AutocompleteTokenDTO, ListResponseArgsOfDBHOrderItemListItemDTO, QueryTokenDTO } from '@swagger/oms';
 import { PickupShelfIOService } from './pickup-shelf-io.service';
 import { Observable, throwError } from 'rxjs';
+import { Filter } from '@shared/components/filter';
 
 @Injectable({ providedIn: 'root' })
 export class PickupShelfOutService extends PickupShelfIOService {
   private _abholfachService = inject(AbholfachService);
 
+  name() {
+    return 'PickupShelfOutService';
+  }
+
   getQuerySettings() {
     return this._abholfachService.AbholfachWarenausgabeQuerySettings();
   }
@@ -22,6 +27,7 @@ export class PickupShelfOutService extends PickupShelfIOService {
   getOrderItemsByOrderNumberOrCompartmentCode(args: {
     orderNumber?: string;
     compartmentCode?: string;
+    filter?: Filter;
   }): Observable<ListResponseArgsOfDBHOrderItemListItemDTO> {
     if (!args.orderNumber && !args.compartmentCode) {
       return throwError(
@@ -29,13 +35,17 @@ export class PickupShelfOutService extends PickupShelfIOService {
       );
     }
 
+    const { orderdate, supplier_id } = args.filter?.getQueryToken()?.filter ?? {};
+
     return this._abholfachService.AbholfachWarenausgabe({
       input: {
         qs: args.compartmentCode ?? args.orderNumber,
       },
       filter: {
+        archive: String(true),
         all_branches: String(true),
-        archive: String(false),
+        orderdate,
+        supplier_id,
       },
     });
   }

apps/isa-app/src/app/app-routing.module.ts

@@ -1,4 +1,4 @@
-import { inject, isDevMode, NgModule } from '@angular/core';
+import { isDevMode, NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import {
   CanActivateCartGuard,
@@ -8,8 +8,6 @@ import {
   CanActivateCustomerOrdersWithProcessIdGuard,
   CanActivateCustomerWithProcessIdGuard,
   CanActivateGoodsInGuard,
-  CanActivateGoodsOutGuard,
-  CanActivateGoodsOutWithProcessIdGuard,
   CanActivateProductGuard,
   CanActivateProductWithProcessIdGuard,
   CanActivateRemissionGuard,
@@ -22,9 +20,9 @@ import { MainComponent } from './main.component';
 import { PreviewComponent } from './preview';
 import { BranchSectionResolver, CustomerSectionResolver, ProcessIdResolver } from './resolvers';
 import { TokenLoginComponent, TokenLoginModule } from './token-login';
-import { ApplicationService } from '@core/application';
 import { ProcessIdGuard } from './guards/process-id.guard';
 import { ActivateProcessIdGuard, ActivateProcessIdWithConfigKeyGuard } from './guards/activate-process-id.guard';
+import { MatomoRouteData } from 'ngx-matomo-client';
 
 const routes: Routes = [
   {
@@ -45,6 +43,11 @@ const routes: Routes = [
           {
             path: 'dashboard',
             loadChildren: () => import('@page/dashboard').then((m) => m.DashboardModule),
+            data: {
+              matomo: {
+                title: 'Dashboard',
+              } as MatomoRouteData,
+            },
           },
           {
             path: 'product',

apps/isa-app/src/app/app-store.module.ts

@@ -28,7 +28,7 @@ export const metaReducers: MetaReducer<RootState>[] = !environment.production ?
   imports: [
     StoreModule.forRoot(rootReducer, { metaReducers }),
     EffectsModule.forRoot([]),
-    StoreDevtoolsModule.instrument({ name: 'ISA Ngrx Application Store' }),
+    StoreDevtoolsModule.instrument({ name: 'ISA Ngrx Application Store', connectInZone: true }),
   ],
 })
 export class AppStoreModule {}

apps/isa-app/src/app/app.component.ts

@@ -1,18 +1,17 @@
 import { DOCUMENT } from '@angular/common';
 import { Component, HostListener, Inject, OnInit, Renderer2 } from '@angular/core';
 import { Title } from '@angular/platform-browser';
-import { SwUpdate, UpdateAvailableEvent } from '@angular/service-worker';
+import { SwUpdate } from '@angular/service-worker';
 import { ApplicationService } from '@core/application';
 import { Config } from '@core/config';
 import { NotificationsHub } from '@hub/notifications';
 import packageInfo from 'package';
-import { asapScheduler, interval, Observable, Subscription } from 'rxjs';
+import { asapScheduler, interval, Subscription } from 'rxjs';
 import { UserStateService } from '@swagger/isa';
 import { IsaLogProvider } from './providers';
 import { EnvironmentService } from '@core/environment';
 import { AuthService } from '@core/auth';
 import { UiMessageModalComponent, UiModalService } from '@ui/modal';
-import { tap } from 'rxjs/operators';
 
 @Component({
   selector: 'app-root',
@@ -21,7 +20,6 @@ import { tap } from 'rxjs/operators';
 })
 export class AppComponent implements OnInit {
   private _checkForUpdates: number = this._config.get('checkForUpdates');
-  updateAvailableObs: Observable<UpdateAvailableEvent>;
 
   get checkForUpdates(): number {
     return this._checkForUpdates;

apps/isa-app/src/app/app.module.ts

@@ -37,6 +37,8 @@ import { NativeContainerService } from 'native-container';
 import { ShellModule } from '@shared/shell';
 import { MainComponent } from './main.component';
 import { IconModule } from '@shared/components/icon';
+import { provideMatomo } from 'ngx-matomo-client';
+import { withRouter, withRouteData } from 'ngx-matomo-client';
 
 registerLocaleData(localeDe, localeDeExtra);
 registerLocaleData(localeDe, 'de', localeDeExtra);
@@ -46,7 +48,7 @@ export function _appInitializerFactory(
   auth: AuthService,
   injector: Injector,
   scanAdapter: ScanAdapterService,
-  nativeContainer: NativeContainerService
+  nativeContainer: NativeContainerService,
 ) {
   return async () => {
     const statusElement = document.querySelector('#init-status');
@@ -135,6 +137,7 @@ export function _notificationsHubOptionsFactory(config: Config, auth: AuthServic
       useClass: IsaErrorHandler,
     },
     { provide: LOCALE_ID, useValue: 'de-DE' },
+    provideMatomo({ trackerUrl: 'http://localhost:8080', siteId: '1' }, withRouter(), withRouteData()),
   ],
   bootstrap: [AppComponent],
 })

apps/isa-app/src/app/guards/can-activate-customer-orders-with-process-id.guard.ts

@@ -15,11 +15,12 @@ export class CanActivateCustomerOrdersWithProcessIdGuard {
       .toPromise();
 
     if (!process) {
+      const processes = await this._applicationService.getProcesses$('customer').pipe(first()).toPromise();
       await this._applicationService.createProcess({
         id: +route.params.processId,
-        type: 'customer-order',
+        type: 'cart',
         section: 'customer',
-        name: `Kundenbestellungen`,
+        name: `Vorgang ${this.processNumber(processes.filter((process) => process.type === 'cart'))}`,
       });
     }
 
@@ -46,6 +47,18 @@ export class CanActivateCustomerOrdersWithProcessIdGuard {
 
   processNumber(processes: ApplicationProcess[]) {
     const processNumbers = processes?.map((process) => Number(process?.name?.replace(/\D/g, '')));
-    return !!processNumbers && processNumbers?.length > 0 ? Math.max(...processNumbers) + 1 : 1;
+    return !!processNumbers && processNumbers.length > 0 ? this.findMissingNumber(processNumbers) : 1;
+  }
+
+  findMissingNumber(processNumbers: number[]) {
+    // Ticket #3272 Bei Klick auf "+" bzw. neuen Prozess hinzufügen soll der neue Tab immer die höchste Nummer haben (wie aktuell im Produktiv)
+    // ----------------------------------------------------------------------------------------------------------------------------------------
+
+    // for (let missingNumber = 1; missingNumber < Math.max(...processNumbers); missingNumber++) {
+    //   if (!processNumbers.find((number) => number === missingNumber)) {
+    //     return missingNumber;
+    //   }
+    // }
+    return Math.max(...processNumbers) + 1;
   }
 }

apps/isa-app/src/app/guards/can-activate-goods-in.guard.ts

@@ -15,7 +15,7 @@ export class CanActivateGoodsInGuard {
         id: this._config.get('process.ids.goodsIn'),
         type: 'goods-in',
         section: 'branch',
-        name: 'Abholfach',
+        name: '',
       });
     }
     this._applicationService.activateProcess(this._config.get('process.ids.goodsIn'));

apps/isa-app/src/app/store/root-state.service.ts

@@ -2,23 +2,26 @@ import { Injectable } from '@angular/core';
 import { Logger, LogLevel } from '@core/logger';
 import { Store } from '@ngrx/store';
 import { UserStateService } from '@swagger/isa';
-import { debounceTime, switchMap } from 'rxjs/operators';
+import { debounceTime, switchMap, takeUntil } from 'rxjs/operators';
 import { RootState } from './root.state';
 import packageInfo from 'package';
 import { environment } from '../../environments/environment';
+import { Subject } from 'rxjs';
 
 @Injectable({ providedIn: 'root' })
 export class RootStateService {
   static LOCAL_STORAGE_KEY = 'ISA_APP_INITIALSTATE';
 
+  private _cancelSave = new Subject<void>();
+
   constructor(private readonly _userStateService: UserStateService, private _logger: Logger, private _store: Store) {
     if (!environment.production) {
       console.log('Die UserState kann in der Konsole mit der Funktion "clearUserState()" geleert werden.');
-
-      window['clearUserState'] = () => {
-        this.clear();
-      };
     }
+
+    window['clearUserState'] = () => {
+      this.clear();
+    };
   }
 
   async init() {
@@ -31,7 +34,8 @@ export class RootStateService {
     this._store
       .select((state) => state)
       .pipe(
-        debounceTime(500),
+        takeUntil(this._cancelSave),
+        debounceTime(1000),
         switchMap((state) => {
           const raw = JSON.stringify({ ...state, version: packageInfo.version });
           RootStateService.SaveToLocalStorageRaw(raw);
@@ -64,13 +68,17 @@ export class RootStateService {
     return false;
   }
 
-  clear() {
-    this._userStateService
-      .UserStateResetUserState()
-      .toPromise()
-      .catch((error) => this._logger.log(LogLevel.ERROR, error));
-    RootStateService.RemoveFromLocalStorage();
-    window.location.reload();
+  async clear() {
+    try {
+      this._cancelSave.next();
+      await this._userStateService.UserStateResetUserState().toPromise();
+      await new Promise((resolve) => setTimeout(resolve, 100));
+      RootStateService.RemoveFromLocalStorage();
+      await new Promise((resolve) => setTimeout(resolve, 100));
+      window.location.reload();
+    } catch (error) {
+      this._logger.log(LogLevel.ERROR, error);
+    }
   }
 
   static SaveToLocalStorage(state: RootState) {

apps/isa-app/src/assets/icons.json

@@ -280,6 +280,11 @@
             "name": "apps",
             "data": "M226-160q-28 0-47-19t-19-47q0-28 19-47t47-19q28 0 47 19t19 47q0 28-19 47t-47 19Zm254 0q-28 0-47-19t-19-47q0-28 19-47t47-19q28 0 47 19t19 47q0 28-19 47t-47 19Zm254 0q-28 0-47-19t-19-47q0-28 19-47t47-19q28 0 47 19t19 47q0 28-19 47t-47 19ZM226-414q-28 0-47-19t-19-47q0-28 19-47t47-19q28 0 47 19t19 47q0 28-19 47t-47 19Zm254 0q-28 0-47-19t-19-47q0-28 19-47t47-19q28 0 47 19t19 47q0 28-19 47t-47 19Zm254 0q-28 0-47-19t-19-47q0-28 19-47t47-19q28 0 47 19t19 47q0 28-19 47t-47 19ZM226-668q-28 0-47-19t-19-47q0-28 19-47t47-19q28 0 47 19t19 47q0 28-19 47t-47 19Zm254 0q-28 0-47-19t-19-47q0-28 19-47t47-19q28 0 47 19t19 47q0 28-19 47t-47 19Zm254 0q-28 0-47-19t-19-47q0-28 19-47t47-19q28 0 47 19t19 47q0 28-19 47t-47 19Z",
             "viewBox": "0 -960 960 960"
+        },
+        {
+            "name": "gift",
+            "data": "M2 21V10H0V4H5.2C5.11667 3.85 5.0625 3.69167 5.0375 3.525C5.0125 3.35833 5 3.18333 5 3C5 2.16667 5.29167 1.45833 5.875 0.875C6.45833 0.291667 7.16667 0 8 0C8.38333 0 8.74167 0.0708333 9.075 0.2125C9.40833 0.354167 9.71667 0.55 10 0.8C10.2833 0.533333 10.5917 0.333333 10.925 0.2C11.2583 0.0666667 11.6167 0 12 0C12.8333 0 13.5417 0.291667 14.125 0.875C14.7083 1.45833 15 2.16667 15 3C15 3.18333 14.9833 3.35417 14.95 3.5125C14.9167 3.67083 14.8667 3.83333 14.8 4H20V10H18V21H2ZM12 2C11.7167 2 11.4792 2.09583 11.2875 2.2875C11.0958 2.47917 11 2.71667 11 3C11 3.28333 11.0958 3.52083 11.2875 3.7125C11.4792 3.90417 11.7167 4 12 4C12.2833 4 12.5208 3.90417 12.7125 3.7125C12.9042 3.52083 13 3.28333 13 3C13 2.71667 12.9042 2.47917 12.7125 2.2875C12.5208 2.09583 12.2833 2 12 2ZM7 3C7 3.28333 7.09583 3.52083 7.2875 3.7125C7.47917 3.90417 7.71667 4 8 4C8.28333 4 8.52083 3.90417 8.7125 3.7125C8.90417 3.52083 9 3.28333 9 3C9 2.71667 8.90417 2.47917 8.7125 2.2875C8.52083 2.09583 8.28333 2 8 2C7.71667 2 7.47917 2.09583 7.2875 2.2875C7.09583 2.47917 7 2.71667 7 3ZM2 6V8H9V6H2ZM9 19V10H4V19H9ZM11 19H16V10H11V19ZM18 8V6H11V8H18Z",
+            "viewBox": "0 0 20 21"
         }
         
     ],
@@ -415,6 +420,10 @@
         {
             "name": "isa-box-out",
             "alias": "Versandbestellung (oder gemischt)"
+        },
+        {
+            "name": "package-variant-closed",
+            "alias": "Bestellung ohne Konto"
         },{
             "name": "person",
             "alias": "Onlinekonto"

apps/isa-app/src/assets/images/bookmark_responsive.svg

@@ -0,0 +1,5 @@
+<svg width="48" height="51" viewBox="0 0 48 51" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 4.47368C8 2.01878 9.99009 0 12.445 0L43.555 0C46.0099 0 48 2.01878 48 4.47368H8Z" fill="#172062"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 4.445C0 1.99009 1.99009 0 4.445 0L42.7807 0V43.4808C42.7807 46.7878 39.2981 48.9368 36.3423 47.4537L23.376 40.948C22.1212 40.3183 20.6426 40.3186 19.3879 40.9486L6.4397 47.4505C3.48377 48.9348 0 46.7859 0 43.4782L0 4.445Z" fill="#0556B4"/>
+<rect x="19" y="19" width="18" height="17" fill="#0556B4"/>
+</svg>

apps/isa-app/src/config/config.feature.json

@@ -75,6 +75,12 @@
     "licence": {
         "scandit": "Ae7z0WDdRDFqG6oYuAXzesYGJpDLDqt+xWtQHOESiOjaSkB7IEIDJAk534U+cg1zGnk++4hOEK9hXEGR01NLTjh76w1fDL0U63OUjo50EHBXIUvzAVSur3pRY+1ER7SvSEWaT0hDOLYvYrTpdECtt1graN9yMvJzXD38VJKUfssT92p+YENV2Hul3eXIvaVjHqXE/yvupF+MlOMMUMhX0/Km/yTU9H9SjBdsXYihZmYWbt2JotO3Zs1ojXb0+3La10xb01S1q0XdDN6El3XMVilEtdmrP3WoGois8vpQBvOCEvduxCfILFAqjeWXTZvXSut9u+kQKpK8uHW4rVV6iVClpZfPYqKJqTh78AI9gpnfb/zO9GfQEDS3g7wI5WbQKqaNRzhTVowFRri4Ep9R5TRC1bnd00RC4zVaMkbu5kBOA7YoRjgUiYWHKJpi/VokZWyN6u1lsi5mTUbQkm1ZWfX5I/iUVYBgyHZYl+8kfFkwLPXGZNrF4xqubjKiCZRQj0oyNjHOBeHqvAekzhk7scX2g/NN+liRQv4ur413b+uXacSiiYIrLhtGgzrz1KRrtu19uB5odk3LoerDoiYXat7wEg9zUYT/+uBfO2X+uS7L5LW0PMI3hV+joQVpDk5SlA2868Nx0KWtPWmMf7xCuFIhDskfBsXZNRTblqxkk0RzzSqtjx9ihGr+/Tuzm8Pm0s4OQqV7b+++/Zn+Vo4rCqMTwutjOO7dqhah5hbOT1MqY/6VcjCXyDad3BXXr+WYU4GtYTe8Ytjkm/ZTG3fImoDbMchEcqnCw3oxG5e/gkdurE8g/mZlFOtzAN7KkqIsg6qLaC5COjfLPXsi/A=="
     },
+    "gender": {
+        "0": "Keine Anrede",
+        "1": "Enby",
+        "2": "Herr",
+        "4": "Frau"
+    },
     "@shared/icon": "/assets/icons.json"
 
 }

apps/isa-app/src/config/config.integration.json

@@ -74,5 +74,11 @@
   "licence": {
     "scandit": "Ae7z0WDdRDFqG6oYuAXzesYGJpDLDqt+xWtQHOESiOjaSkB7IEIDJAk534U+cg1zGnk++4hOEK9hXEGR01NLTjh76w1fDL0U63OUjo50EHBXIUvzAVSur3pRY+1ER7SvSEWaT0hDOLYvYrTpdECtt1graN9yMvJzXD38VJKUfssT92p+YENV2Hul3eXIvaVjHqXE/yvupF+MlOMMUMhX0/Km/yTU9H9SjBdsXYihZmYWbt2JotO3Zs1ojXb0+3La10xb01S1q0XdDN6El3XMVilEtdmrP3WoGois8vpQBvOCEvduxCfILFAqjeWXTZvXSut9u+kQKpK8uHW4rVV6iVClpZfPYqKJqTh78AI9gpnfb/zO9GfQEDS3g7wI5WbQKqaNRzhTVowFRri4Ep9R5TRC1bnd00RC4zVaMkbu5kBOA7YoRjgUiYWHKJpi/VokZWyN6u1lsi5mTUbQkm1ZWfX5I/iUVYBgyHZYl+8kfFkwLPXGZNrF4xqubjKiCZRQj0oyNjHOBeHqvAekzhk7scX2g/NN+liRQv4ur413b+uXacSiiYIrLhtGgzrz1KRrtu19uB5odk3LoerDoiYXat7wEg9zUYT/+uBfO2X+uS7L5LW0PMI3hV+joQVpDk5SlA2868Nx0KWtPWmMf7xCuFIhDskfBsXZNRTblqxkk0RzzSqtjx9ihGr+/Tuzm8Pm0s4OQqV7b+++/Zn+Vo4rCqMTwutjOO7dqhah5hbOT1MqY/6VcjCXyDad3BXXr+WYU4GtYTe8Ytjkm/ZTG3fImoDbMchEcqnCw3oxG5e/gkdurE8g/mZlFOtzAN7KkqIsg6qLaC5COjfLPXsi/A=="
   },
+  "gender": {
+    "0": "Keine Anrede",
+    "1": "Enby",
+    "2": "Herr",
+    "4": "Frau"
+  },
   "@shared/icon": "/assets/icons.json"
 }

apps/isa-app/src/config/config.json

@@ -76,5 +76,11 @@
     "licence": {
         "scandit": "Ae7z0WDdRDFqG6oYuAXzesYGJpDLDqt+xWtQHOESiOjaSkB7IEIDJAk534U+cg1zGnk++4hOEK9hXEGR01NLTjh76w1fDL0U63OUjo50EHBXIUvzAVSur3pRY+1ER7SvSEWaT0hDOLYvYrTpdECtt1graN9yMvJzXD38VJKUfssT92p+YENV2Hul3eXIvaVjHqXE/yvupF+MlOMMUMhX0/Km/yTU9H9SjBdsXYihZmYWbt2JotO3Zs1ojXb0+3La10xb01S1q0XdDN6El3XMVilEtdmrP3WoGois8vpQBvOCEvduxCfILFAqjeWXTZvXSut9u+kQKpK8uHW4rVV6iVClpZfPYqKJqTh78AI9gpnfb/zO9GfQEDS3g7wI5WbQKqaNRzhTVowFRri4Ep9R5TRC1bnd00RC4zVaMkbu5kBOA7YoRjgUiYWHKJpi/VokZWyN6u1lsi5mTUbQkm1ZWfX5I/iUVYBgyHZYl+8kfFkwLPXGZNrF4xqubjKiCZRQj0oyNjHOBeHqvAekzhk7scX2g/NN+liRQv4ur413b+uXacSiiYIrLhtGgzrz1KRrtu19uB5odk3LoerDoiYXat7wEg9zUYT/+uBfO2X+uS7L5LW0PMI3hV+joQVpDk5SlA2868Nx0KWtPWmMf7xCuFIhDskfBsXZNRTblqxkk0RzzSqtjx9ihGr+/Tuzm8Pm0s4OQqV7b+++/Zn+Vo4rCqMTwutjOO7dqhah5hbOT1MqY/6VcjCXyDad3BXXr+WYU4GtYTe8Ytjkm/ZTG3fImoDbMchEcqnCw3oxG5e/gkdurE8g/mZlFOtzAN7KkqIsg6qLaC5COjfLPXsi/A=="
     },
+    "gender": {
+        "0": "Keine Anrede",
+        "1": "Enby",
+        "2": "Herr",
+        "4": "Frau"
+    },
     "@shared/icon": "/assets/icons.json"
 }

apps/isa-app/src/config/config.production.json

@@ -75,5 +75,11 @@
   "licence": {
     "scandit": "AVljxT/dG+TAIDDL2jTxm843juR2OtZ6lHLxRpYR7x9uYiSvY2IAHdRx8tjsf9KU7wK0F5cAeb/nLMHF6Vor9ps79wvuBQw6G3N0IW978b78ZUgPOFzxHUAMuD8dbkDZlX8r9y1cOd9sT3UNEwGrQ4siUt2oCkigyTxJAgYs1ijnjQid7q42hHk3tMXywrAYeu5MhF0TV1H77DRDMxPHD/xiR0zhFQRB2Dtnm1+e3LHKCyQjZ/zknEpQB6HS7UbCBoEDj4tohb83E6oqmQFWwt85/Jk9f49gxXakIcNODnQI5H63kSqpEmV9Al1a5L+WGZ6Bq1gwBbnD8FBXlVqxoooiFXW7jzzBa9LNmQiQ5J8yEkIsPeyOHec7F4ERvVONSMYwWyH39ZweSiRsZRM1UsFPhN96bCT5MEwkjPFn4gji6TPGEceJZvV3HwsiCT5Bgjla4bvDsZ2jYvAr9tSij8kIii9dHvsWlrimt+szHJLSz+8uNI6jAvXyr2f3oRxZD/F9osZHVWkgtAc+vVWqkxVJCqmpmoHOXI6TFSqSjYHddhZyU5r2lgQt0+NI6k/bV3iN7Le1RJCP/wuSDCTZjzsU1igB7UnIN2Y70CqCjIeVH9qlxaI1YAC9lwFv1FZvsiueYeJP1n39mmXCSELVtzxgIBEX5yaIHNbbGXd+e8JUgcO8vJ2JA2kJudaU+xfYR5SY//+J1kPsNSbnBnM25LL+LjeRB3QTfqV5sFq8ORWcIMITvkEaRfP3PVcOzb+hO4Ren4ezhJuyADulmvG8a9Kxxk6ymzBbE7a93SGVbxp7OQNEmvTn5+B9wJ7/l1mtvZL2TilrDZBQVMYWrGuUGpA="
   },
+  "gender": {
+    "0": "Keine Anrede",
+    "1": "Enby",
+    "2": "Herr",
+    "4": "Frau"
+  },
 "@shared/icon": "/assets/icons.json"
 }

apps/isa-app/src/config/config.staging.json

@@ -75,5 +75,11 @@
   "licence": {
     "scandit": "AVljxT/dG+TAIDDL2jTxm843juR2OtZ6lHLxRpYR7x9uYiSvY2IAHdRx8tjsf9KU7wK0F5cAeb/nLMHF6Vor9ps79wvuBQw6G3N0IW978b78ZUgPOFzxHUAMuD8dbkDZlX8r9y1cOd9sT3UNEwGrQ4siUt2oCkigyTxJAgYs1ijnjQid7q42hHk3tMXywrAYeu5MhF0TV1H77DRDMxPHD/xiR0zhFQRB2Dtnm1+e3LHKCyQjZ/zknEpQB6HS7UbCBoEDj4tohb83E6oqmQFWwt85/Jk9f49gxXakIcNODnQI5H63kSqpEmV9Al1a5L+WGZ6Bq1gwBbnD8FBXlVqxoooiFXW7jzzBa9LNmQiQ5J8yEkIsPeyOHec7F4ERvVONSMYwWyH39ZweSiRsZRM1UsFPhN96bCT5MEwkjPFn4gji6TPGEceJZvV3HwsiCT5Bgjla4bvDsZ2jYvAr9tSij8kIii9dHvsWlrimt+szHJLSz+8uNI6jAvXyr2f3oRxZD/F9osZHVWkgtAc+vVWqkxVJCqmpmoHOXI6TFSqSjYHddhZyU5r2lgQt0+NI6k/bV3iN7Le1RJCP/wuSDCTZjzsU1igB7UnIN2Y70CqCjIeVH9qlxaI1YAC9lwFv1FZvsiueYeJP1n39mmXCSELVtzxgIBEX5yaIHNbbGXd+e8JUgcO8vJ2JA2kJudaU+xfYR5SY//+J1kPsNSbnBnM25LL+LjeRB3QTfqV5sFq8ORWcIMITvkEaRfP3PVcOzb+hO4Ren4ezhJuyADulmvG8a9Kxxk6ymzBbE7a93SGVbxp7OQNEmvTn5+B9wJ7/l1mtvZL2TilrDZBQVMYWrGuUGpA="
   },
+  "gender": {
+    "0": "Keine Anrede",
+    "1": "Enby",
+    "2": "Herr",
+    "4": "Frau"
+  },
   "@shared/icon": "/assets/icons.json"
 }

apps/isa-app/src/config/config.test.json

@@ -76,5 +76,11 @@
     "licence": {
         "scandit": "Ae7z0WDdRDFqG6oYuAXzesYGJpDLDqt+xWtQHOESiOjaSkB7IEIDJAk534U+cg1zGnk++4hOEK9hXEGR01NLTjh76w1fDL0U63OUjo50EHBXIUvzAVSur3pRY+1ER7SvSEWaT0hDOLYvYrTpdECtt1graN9yMvJzXD38VJKUfssT92p+YENV2Hul3eXIvaVjHqXE/yvupF+MlOMMUMhX0/Km/yTU9H9SjBdsXYihZmYWbt2JotO3Zs1ojXb0+3La10xb01S1q0XdDN6El3XMVilEtdmrP3WoGois8vpQBvOCEvduxCfILFAqjeWXTZvXSut9u+kQKpK8uHW4rVV6iVClpZfPYqKJqTh78AI9gpnfb/zO9GfQEDS3g7wI5WbQKqaNRzhTVowFRri4Ep9R5TRC1bnd00RC4zVaMkbu5kBOA7YoRjgUiYWHKJpi/VokZWyN6u1lsi5mTUbQkm1ZWfX5I/iUVYBgyHZYl+8kfFkwLPXGZNrF4xqubjKiCZRQj0oyNjHOBeHqvAekzhk7scX2g/NN+liRQv4ur413b+uXacSiiYIrLhtGgzrz1KRrtu19uB5odk3LoerDoiYXat7wEg9zUYT/+uBfO2X+uS7L5LW0PMI3hV+joQVpDk5SlA2868Nx0KWtPWmMf7xCuFIhDskfBsXZNRTblqxkk0RzzSqtjx9ihGr+/Tuzm8Pm0s4OQqV7b+++/Zn+Vo4rCqMTwutjOO7dqhah5hbOT1MqY/6VcjCXyDad3BXXr+WYU4GtYTe8Ytjkm/ZTG3fImoDbMchEcqnCw3oxG5e/gkdurE8g/mZlFOtzAN7KkqIsg6qLaC5COjfLPXsi/A=="
     },
+    "gender": {
+        "0": "Keine Anrede",
+        "1": "Enby",
+        "2": "Herr",
+        "4": "Frau"
+      },
     "@shared/icon": "/assets/icons.json"
 }

apps/isa-app/src/polyfills.ts

@@ -23,7 +23,7 @@
  * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
  * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
  */
-import 'web-animations-js'; // Run `npm install --save web-animations-js`.
+// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
 
 /**
  * By default, zone.js will patch all possible macroTask and DomEvents
@@ -57,4 +57,3 @@ import 'zone.js'; // Included with Angular CLI.
 /***************************************************************************************************
  * APPLICATION IMPORTS
  */
-import 'hammerjs';

apps/isa/remission/src/lib/mock/mock-remission.service.ts

@@ -47,7 +47,7 @@ export class MockRemissionService extends RemissionService {
   >();
   private remissionSubjectIdRef = new Map<number, number>();
 
-  private reloadProductsSubject = new Subject();
+  private reloadProductsSubject = new Subject<void>();
   private productSubject = new BehaviorSubject<RemissionProduct[]>(
     remissionProducts
   );

apps/modal/availabilities/src/lib/availabilities.component.html

@@ -35,7 +35,11 @@
       </div>
 
       <div class="branch-actions">
-        <button *ngIf="(branch.id | stockInfo: (inStock$ | async))?.availableQuantity > 0" class="cta-reserve" (click)="reserve(branch)">
+        <button
+          *ngIf="(branch.id | stockInfo: (inStock$ | async))?.availableQuantity > 0 && branch?.isShippingEnabled"
+          class="cta-reserve"
+          (click)="reserve(branch)"
+        >
           Reservieren
         </button>
 

apps/modal/availabilities/src/lib/availabilities.component.ts

@@ -37,7 +37,7 @@ export class ModalAvailabilitiesComponent {
           (branch) =>
             branch &&
             branch?.isOnline &&
-            branch?.isShippingEnabled &&
+            // branch?.isShippingEnabled && ------ Rausgenommen aufgrund des Tickets #4712
             branch?.isOrderingEnabled &&
             branch?.id !== userbranch?.id &&
             branch?.branchType === 1

apps/page/assortment/src/lib/price-update/price-update-list/price-update-item.component.html

@@ -10,7 +10,7 @@
 <div class="page-price-update-item__item-card p-5 h-[212px] bg-white">
   <div class="page-price-update-item__item-thumbnail text-center mr-4 w-[47px] h-[73px]">
     <img
-      class="page-price-update-item__item-image w-[47px] h-[73px]"
+      class="page-price-update-item__item-image w-[47px] max-h-[73px]"
       loading="lazy"
       *ngIf="item?.product?.ean | productImage; let productImage"
       [src]="productImage"

apps/page/catalog/src/lib/article-details/article-details.component.html

@@ -1,3 +1,393 @@
+<div class="page-article-details__wrapper">
+  <div #detailsContainer class="page-article-details__container px-5" *ngIf="store.item$ | async; let item">
+    <div class="page-article-details__product-details mb-3">
+      <div class="page-article-details__product-bookmark flex fixed justify-self-end">
+        <div *ngIf="showArchivBadge$ | async" class="archiv-badge">
+          <button [uiOverlayTrigger]="archivTooltip" class="p-0 m-0 outline-none border-none bg-transparent relative -top-[0.3125rem]">
+            <img src="/assets/images/bookmark_benachrichtigung_archiv.svg" alt="Archiv Badge" />
+            <ui-tooltip yPosition="above" xPosition="after" [yOffset]="-11" [xOffset]="-8" #archivTooltip [closeable]="true">
+              <ng-container *ngIf="isAvailable$ | async; else notAvailable">
+                Archivtitel. Wird nicht mehr gedruckt. Artikel ist bestellbar, weil lieferbar.
+              </ng-container>
+              <ng-template #notAvailable> Archivtitel. Wird nicht mehr gedruckt. Nicht bestellbar. </ng-template>
+            </ui-tooltip>
+          </button>
+        </div>
+        <div *ngIf="showSubscriptionBadge$ | async">
+          <button
+            [uiOverlayTrigger]="subscribtionTooltip"
+            class="p-0 m-0 outline-none border-none bg-transparent relative -top-[0.3125rem]"
+          >
+            <img src="/assets/images/bookmark_subscription.svg" alt="Fortsetzungsartikel Badge" />
+          </button>
+          <ui-tooltip yPosition="above" xPosition="after" [yOffset]="-11" [xOffset]="-8" #subscribtionTooltip [closeable]="true"
+            >Artikel ist ein Fortsetzungsartikel,<br />
+            Artikel muss über eine Aboabteilung<br />
+            bestellt werden.
+          </ui-tooltip>
+        </div>
+        <div *ngIf="showPromotionBadge$ | async" class="promotion-badge">
+          <button [uiOverlayTrigger]="promotionTooltip" class="p-0 m-0 outline-none border-none bg-transparent relative -top-[0.3125rem]">
+            <shared-icon-badge icon="gift" alt="Prämienkatalog Badge"></shared-icon-badge>
+            <ui-tooltip yPosition="above" xPosition="after" [yOffset]="-11" [xOffset]="-8" #promotionTooltip [closeable]="true">
+              Der Artikel ist als Prämie für {{ promotionPoints$ | async }} Punkte erhältlich.
+            </ui-tooltip>
+          </button>
+        </div>
+      </div>
+
+      <div class="page-article-details__product-image-recessions flex flex-col items-center">
+        <div class="page-article-details__product-image">
+          <button class="border-none outline-none bg-transparent relative" (click)="showImages()">
+            <img
+              class="max-h-[19.6875rem] max-w-[12.1875rem] rounded"
+              (load)="loadImage()"
+              [src]="item.imageId | productImage: 195 : 315 : true"
+              alt="product image"
+            />
+            <ui-icon
+              class="absolute text-[#A7B9CB] inline-block bottom-[0.875rem] right-[1.125rem]"
+              *ngIf="imageLoaded$ | async"
+              icon="search_add"
+              size="25px"
+            ></ui-icon>
+          </button>
+        </div>
+
+        <button
+          (click)="showReviews()"
+          class="page-article-details__product-recessions flex flex-col mt-2 items-center bg-transparent border-none outline-none"
+          *ngIf="item.reviews?.length > 0"
+        >
+          <ui-stars [rating]="store.reviewRating$ | async"></ui-stars>
+
+          <div class="text-p2 text-[#0556B4] font-bold">{{ item.reviews.length }} Rezensionen</div>
+        </button>
+      </div>
+
+      <div class="page-article-details__product-contributors">
+        <a
+          *ngFor="let contributor of contributors$ | async; let last = last"
+          class="text-[#0556B4] font-semibold no-underline text-p2"
+          [routerLink]="resultsPath"
+          [queryParams]="{ main_qs: contributor, main_author: 'author' }"
+        >
+          {{ contributor }}{{ last ? '' : ';' }}
+        </a>
+      </div>
+
+      <div class="page-article-details__product-print justify-self-end" [class.mt-4]="isBadgeVisible$ | async">
+        <button class="bg-transparent text-brand font-bold text-lg outline-none border-none p-0" (click)="print()">Drucken</button>
+      </div>
+
+      <div class="page-article-details__product-title text-h3 font-bold mb-6">
+        {{ item.product?.name }}
+      </div>
+
+      <div class="page-article-details__product-misc flex flex-col mb-4">
+        <div
+          class="page-article-details__product-format flex items-center font-bold text-p3"
+          *ngIf="item?.product?.format && item?.product?.formatDetail"
+        >
+          <img
+            *ngIf="item?.product?.format !== '--'"
+            class="flex mr-2 h-[1.125rem]"
+            [src]="'/assets/images/Icon_' + item.product?.format + '.svg'"
+            [alt]="item.product?.formatDetail"
+          />
+          {{ item.product?.formatDetail }}
+        </div>
+
+        <div class="page-article-details__product-volume" *ngIf="item?.product?.volume">Band/Reihe {{ item?.product?.volume }}</div>
+
+        <div class="page-article-details__product-publication">{{ publicationDate$ | async }}</div>
+      </div>
+
+      <div class="page-article-details__product-price-info flex flex-col mb-4 flex-nowrap self-end">
+        <div class="page-article-details__product-price font-bold text-xl self-end" *ngIf="price$ | async; let price">
+          {{ price?.value?.value | currency: price?.value?.currency : 'code' }}
+        </div>
+        <div *ngIf="price$ | async; let price" class="page-article-details__product-price-bound self-end">
+          {{ price?.vat?.vatType | vat: (priceMaintained$ | async) }}
+        </div>
+        <div class="page-article-details__product-points self-end" *ngIf="store.promotionPoints$ | async; let promotionPoints">
+          {{ promotionPoints }} Lesepunkte
+        </div>
+      </div>
+
+      <div class="page-article-details__product-origin-infos flex flex-col mb-4">
+        <div class="page-article-details__product-manufacturer" data-name="product-manufacturer">{{ item.product?.manufacturer }}</div>
+
+        <div class="page-article-details__product-language" *ngIf="item?.product?.locale" data-name="product-language">
+          {{ item?.product?.locale }}
+        </div>
+      </div>
+
+      <div class="page-article-details__product-stock flex justify-end items-center">
+        <div class="h-5 w-16 bg-[#e6eff9] animate-[load_0.75s_linear_infinite]" *ngIf="store.fetchingTakeAwayAvailability$ | async"></div>
+        <button
+          class="flex flex-row py-4 pl-4"
+          type="button"
+          [uiOverlayTrigger]="tooltip"
+          [overlayTriggerDisabled]="!(stockTooltipText$ | async)"
+          (click)="showTooltip()"
+          *ngIf="!(store.fetchingTakeAwayAvailability$ | async)"
+        >
+          <ng-container *ngIf="store.takeAwayAvailability$ | async; let takeAwayAvailability">
+            <ui-icon class="mr-2 mb-1" icon="home" size="15px"></ui-icon>
+            <span class="font-bold text-p3">{{ takeAwayAvailability.inStock || 0 }}x</span>
+          </ng-container>
+        </button>
+        <ui-tooltip #tooltip yPosition="above" xPosition="after" [yOffset]="-12" [closeable]="true">
+          {{ stockTooltipText$ | async }}
+        </ui-tooltip>
+      </div>
+
+      <div class="page-article-details__product-ean-specs flex flex-col">
+        <div class="page-article-details__product-ean" data-name="product-ean">{{ item.product?.ean }}</div>
+
+        <div class="page-article-details__product-specs">
+          <ng-container *ngIf="item?.specs?.length > 0">
+            {{ (item?.specs)[0]?.value }}
+          </ng-container>
+        </div>
+      </div>
+
+      <div class="page-article-details__product-availabilities flex flex-row items-center justify-end mt-4">
+        <div
+          class="h-5 w-6 bg-[#e6eff9] animate-[load_0.75s_linear_infinite]"
+          *ngIf="store.fetchingTakeAwayAvailability$ | async; else showAvailabilityTakeAwayIcon"
+        ></div>
+        <ng-template #showAvailabilityTakeAwayIcon>
+          <div
+            *ngIf="store.isTakeAwayAvailabilityAvailable$ | async"
+            class="w-[2.25rem] h-[2.25rem] bg-[#D8DFE5] rounded-[5px_5px_0px_5px] flex items-center justify-center"
+          >
+            <ui-icon class="mx-1" icon="shopping_bag" size="18px"> </ui-icon>
+          </div>
+        </ng-template>
+
+        <div
+          class="h-5 w-6 bg-[#e6eff9] animate-[load_0.75s_linear_infinite]"
+          *ngIf="store.fetchingPickUpAvailability$ | async; else showAvailabilityPickUpIcon"
+        ></div>
+        <ng-template #showAvailabilityPickUpIcon>
+          <div
+            #uiOverlayTrigger="uiOverlayTrigger"
+            [uiOverlayTrigger]="orderDeadlineTooltip"
+            *ngIf="store.isPickUpAvailabilityAvailable$ | async"
+            class="page-article-details__product-pick-up-availability w-[2.25rem] h-[2.25rem] cursor-pointer bg-[#D8DFE5] rounded-[5px_5px_0px_5px] flex items-center justify-center ml-3"
+            [class.tooltip-active]="uiOverlayTrigger.opened"
+          >
+            <shared-icon icon="isa-box-out" [size]="24"></shared-icon>
+          </div>
+
+          <ui-tooltip [warning]="true" yPosition="above" xPosition="after" [yOffset]="-12" #orderDeadlineTooltip [closeable]="true">
+            <b>{{ (store.pickUpAvailability$ | async)?.orderDeadline | orderDeadline }}</b>
+          </ui-tooltip>
+        </ng-template>
+
+        <div
+          class="h-5 w-6 bg-[#e6eff9] animate-[load_0.75s_linear_infinite]"
+          *ngIf="store.fetchingDeliveryAvailability$ | async; else showAvailabilityDeliveryIcon"
+        ></div>
+        <ng-template #showAvailabilityDeliveryIcon>
+          <div
+            *ngIf="showDeliveryTruck$ | async"
+            class="w-[2.25rem] h-[2.25rem] bg-[#D8DFE5] rounded-[5px_5px_0px_5px] flex items-center justify-center ml-3"
+          >
+            <ui-icon class="-mb-[0.3125rem] -mt-[0.3125rem] mx-1" icon="truck" size="30px"></ui-icon>
+          </div>
+        </ng-template>
+
+        <div
+          class="h-5 w-6 bg-[#e6eff9] animate-[load_0.75s_linear_infinite]"
+          *ngIf="store.fetchingDeliveryB2BAvailability$ | async; else showAvailabilityDeliveryB2BIcon"
+        ></div>
+        <ng-template #showAvailabilityDeliveryB2BIcon>
+          <div
+            *ngIf="showDeliveryB2BTruck$ | async"
+            class="w-[2.25rem] h-[2.25rem] bg-[#D8DFE5] rounded-[5px_5px_0px_5px] flex items-center justify-center ml-3"
+          >
+            <ui-icon class="-mb-[0.625rem] -mt-[0.625rem] mx-1" icon="truck_b2b" size="30px"> </ui-icon>
+          </div>
+        </ng-template>
+
+        <span *ngIf="store.isDownload$ | async" class="flex flex-row items-center">
+          <div class="w-[2.25rem] h-[2.25rem] bg-[#D8DFE5] rounded-[5px_5px_0px_5px] flex items-center justify-center ml-3">
+            <ui-icon class="mx-1" icon="download" size="18px"></ui-icon>
+          </div>
+        </span>
+      </div>
+
+      <div class="page-article-details__shelf-ssc">
+        <div class="page-article-details__ssc flex justify-end my-2 font-bold text-lg">
+          <div class="w-52 h-5 bg-[#e6eff9] animate-[load_0.75s_linear_infinite]" *ngIf="fetchingAvailabilities$ | async"></div>
+          <ng-container *ngIf="!(fetchingAvailabilities$ | async)">
+            <div class="text-right" *ngIf="store.sscText$ | async; let sscText">
+              {{ sscText }}
+            </div>
+          </ng-container>
+        </div>
+
+        <div class="page-article-details__shelfinfo text-right" *ngIf="store.isDownload$ | async">
+          <ng-container
+            *ngIf="
+              item?.stockInfos && item?.shelfInfos && (item?.stockInfos)[0]?.compartment && (item?.shelfInfos)[0]?.label;
+              else stockInfos
+            "
+          >
+            <span data-name="compartment">
+              {{ (item?.stockInfos)[0]?.compartment }}
+            </span>
+            /
+            <br />
+            <span data-name="shelf-info-label">
+              {{ (item?.shelfInfos)[0]?.label }}
+            </span>
+          </ng-container>
+          <ng-template #stockInfos>
+            <ng-container *ngIf="item?.stockInfos && (item?.stockInfos)[0]?.compartment; else shelfInfos">
+              {{ (item?.stockInfos)[0]?.compartment }}
+            </ng-container>
+          </ng-template>
+          <ng-template #shelfInfos>
+            <ng-container *ngIf="item?.shelfInfos && (item?.shelfInfos)[0]?.label">
+              <span data-name="shelf-info-label">{{ (item?.shelfInfos)[0]?.label }}</span>
+            </ng-container>
+          </ng-template>
+        </div>
+        <div class="page-article-details__shelfinfo text-right" *ngIf="!(store.isDownload$ | async)">
+          <ng-container
+            *ngIf="
+              item?.stockInfos && item?.shelfInfos && (item?.stockInfos)[0]?.compartment && (item?.shelfInfos)[0]?.label;
+              else stockInfos2
+            "
+          >
+            <span data-name="compartment">{{ (item?.stockInfos)[0]?.compartment }}</span>
+            /
+            <br />
+            <span data-name="shelf-info-label">{{ (item?.shelfInfos)[0]?.label }}</span>
+          </ng-container>
+          <ng-template #stockInfos2>
+            <ng-container *ngIf="item?.stockInfos && (item?.stockInfos)[0]?.compartment; else shelfInfos2">
+              {{ (item?.stockInfos)[0]?.compartment }}
+            </ng-container>
+          </ng-template>
+          <ng-template #shelfInfos2>
+            <ng-container *ngIf="item?.shelfInfos && (item?.shelfInfos)[0]?.label">
+              {{ (item?.shelfInfos)[0]?.label }}
+            </ng-container>
+          </ng-template>
+        </div>
+      </div>
+    </div>
+    <div class="page-article-details__product-formats-container mt-3" *ngIf="item.family?.length > 0">
+      <hr class="bg-[#E6EFF9] border-t-2" />
+      <div class="pt-3">
+        <div class="page-article-details__product-formats">
+          <span class="mr-2">Auch verfügbar als</span>
+
+          <ui-slider [scrollDistance]="250">
+            <a
+              class="mr-4 text-[#0556B4] font-bold no-underline px-2"
+              *ngFor="let format of item.family"
+              [routerLink]="getDetailsPath(format.product.ean)"
+              queryParamsHandling="preserve"
+            >
+              <span class="flex items-center">
+                <img
+                  class="mr-2"
+                  *ngIf="!!format.product?.format"
+                  [src]="'/assets/images/OF_Icon_' + format.product?.format + '.svg'"
+                  alt="format icon"
+                />
+                {{ format.product?.formatDetail }}
+                <span class="ml-1">{{ format.catalogAvailability?.price?.value?.value | currency: '€' }}</span>
+              </span>
+            </a>
+          </ui-slider>
+        </div>
+      </div>
+    </div>
+    <hr class="bg-[#E6EFF9] border-t-2 my-3" />
+    <div #description class="page-article-details__product-description flex flex-col flex-grow mb-6" *ngIf="item.texts?.length > 0">
+      <page-article-details-text class="block box-border" [text]="item.texts[0]"> </page-article-details-text>
+      <div class="box-border">
+        <button
+          class="font-bold flex flex-row text-[#0556B4] items-center mt-2"
+          *ngIf="!showMore && item?.texts?.length > 1"
+          (click)="showMore = !showMore"
+        >
+          Mehr <ui-icon class="ml-2" size="15px" icon="arrow"></ui-icon>
+        </button>
+      </div>
+
+      <div *ngIf="showMore" class="page-article-details__product-description-text flex flex-col whitespace-pre-line break-words box-border">
+        <span *ngFor="let text of item.texts | slice: 1">
+          <h3 class="my-4 text-p2 font-bold">{{ text.label }}</h3>
+          {{ text.value }}
+        </span>
+
+        <button class="font-bold flex flex-row text-[#0556B4] items-center mt-2" (click)="showMore = !showMore">
+          <ui-icon class="transform ml-0 mr-2 rotate-180" size="15px" icon="arrow"></ui-icon> Weniger
+        </button>
+
+        <button class="page-article-details__scroll-top-cta" (click)="scrollTop(description)">
+          <ui-icon class="text-[#0556B4]" icon="arrow" size="20px"></ui-icon>
+        </button>
+      </div>
+
+      <div class="h-28 box-border"></div>
+    </div>
+  </div>
+
+  <div class="page-article-details__product-recommendations relative">
+    <button
+      *ngIf="store.item$ | async; let item"
+      class="shadow-[#dce2e9_0px_-2px_18px_0px] mb-5 border-none outline-none flex items-center px-5 h-14 min-h-[3.5rem] bg-white w-full"
+      (click)="showRecommendations = true"
+      matomoClickCategory="prodict-details"
+      matomoClickAction="click"
+      matomoClickName="recommendations"
+    >
+      <span class="uppercase text-[#0556B4] font-bold text-p3">Empfehlungen</span>
+      <img class="absolute right-5 -top-[0.125rem] h-12" src="assets/images/recommendation_tag.png" alt="recommendation icon" />
+    </button>
+  </div>
+</div>
+
+<div
+  class="page-article-details__actions absolute bottom-32 left-1/2 -translate-x-1/2 whitespace-nowrap"
+  *ngIf="store.item$ | async; let item"
+>
+  <button
+    *ngIf="!(store.isDownload$ | async)"
+    class="text-brand border-2 border-brand bg-white font-bold text-lg px-[1.375rem] py-4 rounded-full mr-[1.875rem]"
+    (click)="showAvailabilities()"
+    matomoClickCategory="prodict-details"
+    matomoClickAction="click"
+    matomoClickName="bestaende-in-anderen-filialen"
+  >
+    Bestände in anderen Filialen
+  </button>
+  <button
+    class="text-white bg-brand border-brand font-bold text-lg px-[1.375rem] py-4 rounded-full border-none no-underline"
+    (click)="showPurchasingModal()"
+    [disabled]="!(isAvailable$ | async) || (fetchingAvailabilities$ | async) || (item?.features && (item?.features)[0]?.key === 'PFO')"
+    matomoClickCategory="prodict-details"
+    matomoClickAction="click"
+    matomoClickName="in-den-Warenkorb"
+  >
+    In den Warenkorb
+  </button>
+</div>
+
+<div class="page-article-details__recommendations-overlay absolute top-0 inset-x-0" @slideYAnimation *ngIf="showRecommendations">
+  <page-article-recommendations (close)="showRecommendations = false"></page-article-recommendations>
+</div>
+
+<!-- 
 <ng-container *ngIf="!showRecommendations">
   <div #detailsContainer class="page-article-details__container px-5 relative">
     <ng-container *ngIf="store.item$ | async; let item">
@@ -385,4 +775,4 @@
 
 <div class="page-article-details__recommendations-overlay absolute rounded-t" @slideYAnimation *ngIf="showRecommendations">
   <page-article-recommendations (close)="showRecommendations = false"></page-article-recommendations>
-</div>
+</div> -->

apps/page/catalog/src/lib/article-details/article-details.component.scss

@@ -1,9 +1,13 @@
 :host {
-  @apply box-border block h-split-screen-tablet desktop-small:h-split-screen-desktop;
+  @apply box-border block relative;
+}
+
+.page-article-details__wrapper {
+  @apply grid grid-rows-[1fr_auto] h-split-screen-tablet max-h-split-screen-tablet desktop-small:h-split-screen-desktop desktop-small:max-h-split-screen-desktop;
 }
 
 .page-article-details__container {
-  @apply h-full w-full overflow-y-scroll overflow-hidden bg-white rounded shadow-card flex flex-col;
+  @apply overflow-scroll bg-white rounded shadow-card flex flex-col;
 }
 
 .page-article-details__product-details {

apps/page/catalog/src/lib/article-details/article-details.component.ts

@@ -76,7 +76,12 @@ export class ArticleDetailsComponent implements OnInit, OnDestroy {
 
   showSubscriptionBadge$ = this.store.item$.pipe(map((item) => item?.features?.find((i) => i.key === 'PFO')));
 
-  showPromotionBadge$ = this.store.item$.pipe(map((item) => item?.features?.find((i) => i.key === 'Promotion')));
+  hasPromotionFeature$ = this.store.item$.pipe(map((item) => !!item?.features?.find((i) => i.key === 'Promotion')));
+  promotionPoints$ = this.store.item$.pipe(map((item) => item?.redemptionPoints));
+
+  showPromotionBadge$ = combineLatest([this.hasPromotionFeature$, this.promotionPoints$]).pipe(
+    map(([hasPromotionFeature, promotionPoints]) => hasPromotionFeature && promotionPoints > 0)
+  );
 
   showArchivBadge$ = this.store.item$.pipe(map((item) => item?.features?.find((i) => i.key === 'ARC')));
 
@@ -136,7 +141,7 @@ export class ArticleDetailsComponent implements OnInit, OnDestroy {
     this.store.deliveryB2BAvailability$,
   ]).pipe(
     map((availabilities) => {
-      return availabilities?.some((availability) => availability?.priceMaintained) ?? false;
+      return availabilities?.some((availability) => (availability as any)?.priceMaintained) ?? false;
     })
   );
 
@@ -338,7 +343,7 @@ export class ArticleDetailsComponent implements OnInit, OnDestroy {
     const item = await this.store.item$.pipe(first()).toPromise();
     const modal = this.uiModal.open<BranchDTO>({
       content: ModalAvailabilitiesComponent,
-      title: 'Weitere Verfügbarkeiten',
+      title: 'Bestände in anderen Filialen',
       data: {
         item,
       },
@@ -434,11 +439,10 @@ export class ArticleDetailsComponent implements OnInit, OnDestroy {
   async navigateToResultList() {
     const processId = this.applicationService.activatedProcessId;
     let crumbs = await this.breadcrumb
-      .getBreadcrumbsByKeyAndTags$(this.applicationService.activatedProcessId, ['catalog'])
+      .getBreadcrumbsByKeyAndTags$(this.applicationService.activatedProcessId, ['catalog', 'details'])
       .pipe(first())
       .toPromise();
 
-    crumbs = crumbs.filter((crumb) => !crumb.tags?.includes('details'));
     const crumb = crumbs[crumbs.length - 1];
     if (!!crumb) {
       await this._navigationService.getArticleSearchResultsPath(processId, { queryParams: crumb.params }).navigate();

apps/page/catalog/src/lib/article-details/article-details.module.ts

@@ -13,6 +13,8 @@ import { UiCommonModule } from '@ui/common';
 import { OrderDeadlinePipeModule } from '@shared/pipes/order-deadline';
 import { IconModule } from '@shared/components/icon';
 import { ArticleDetailsTextComponent } from './article-details-text/article-details-text.component';
+import { IconBadgeComponent } from 'apps/shared/components/icon/src/lib/badge/icon-badge.component';
+import { MatomoModule } from 'ngx-matomo-client';
 
 @NgModule({
   imports: [
@@ -28,6 +30,8 @@ import { ArticleDetailsTextComponent } from './article-details-text/article-deta
     PipesModule,
     OrderDeadlinePipeModule,
     ArticleDetailsTextComponent,
+    IconBadgeComponent,
+    MatomoModule,
   ],
   exports: [ArticleDetailsComponent, ArticleRecommendationsComponent],
   declarations: [ArticleDetailsComponent, ArticleRecommendationsComponent],

apps/page/catalog/src/lib/article-details/recommendations/article-recommendations.component.html

@@ -9,7 +9,7 @@
   <p>Neben dem Titel "{{ item.product?.name }}" gibt es noch andere Artikel, die Sie interessieren könnten.</p>
 
   <div class="articles">
-    <span class="label">
+    <span class="label mb-2">
       <ui-icon icon="recommendation" size="20px"></ui-icon>
       Artikel
     </span>
@@ -24,13 +24,14 @@
           class="article"
           *ngFor="let recommendation of store.recommendations$ | async"
           [routerLink]="getDetailsPath(recommendation.product.ean)"
-          [queryParams]="{ main_qs: recommendation.product.ean }"
+          [queryParams]="{ main_qs: recommendation.product.ean, filter_format: '' }"
           (click)="close.emit()"
         >
           <img [src]="recommendation.product?.ean | productImage: 195:315:true" alt="product-image" />
-
-          <span class="format">{{ recommendation.product?.formatDetail }}</span>
-          <span class="price">{{ recommendation.catalogAvailability?.price?.value?.value | currency: ' ' }} EUR</span>
+          <div class="flex flex-col">
+            <span class="format">{{ recommendation.product?.formatDetail }}</span>
+            <span class="price">{{ recommendation.catalogAvailability?.price?.value?.value | currency: ' ' }} EUR</span>
+          </div>
         </a>
       </ui-slider>
     </ng-container>

apps/page/catalog/src/lib/article-details/recommendations/article-recommendations.component.scss

@@ -29,12 +29,12 @@ p {
   }
 
   .article {
-    @apply flex flex-col mr-7 mt-4 no-underline text-black;
+    @apply flex flex-col mr-7 mt-4 no-underline text-black h-full min-w-[11rem] justify-between;
 
     img {
       @apply rounded-xl;
-      height: 315px;
-      max-width: 195px;
+      max-height: 19.6875rem;
+      max-width: 11rem;
       box-shadow: 0 0 15px #949393;
     }
 

apps/page/catalog/src/lib/article-search/article-search.component.ts

@@ -24,7 +24,7 @@ import { FilterAutocompleteProvider } from '@shared/components/filter';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ArticleSearchComponent implements OnInit, OnDestroy {
-  private _onDestroy$ = new Subject();
+  private _onDestroy$ = new Subject<void>();
   private _processId$: Observable<number>;
 
   constructor(
@@ -43,26 +43,6 @@ export class ArticleSearchComponent implements OnInit, OnDestroy {
         this.removeBreadcrumbs(processId);
         this.addOrUpdateBreadcrumbs(processId, queryParams);
       });
-
-    this._articleSearch.searchCompleted
-      .pipe(takeUntil(this._onDestroy$), withLatestFrom(this._processId$))
-      .subscribe(async ([searchCompleted, processId]) => {
-        if (searchCompleted.state.searchState === '') {
-          const params = searchCompleted.state.filter.getQueryParams();
-          if (searchCompleted.state.hits === 1) {
-            const item = searchCompleted.state.items.find((f) => f);
-            await this._navigationService
-              .getArticleDetailsPath({
-                processId,
-                itemId: item.id,
-                extras: { queryParams: params },
-              })
-              .navigate();
-          } else {
-            await this._navigationService.getArticleSearchResultsPath(processId, { queryParams: params }).navigate();
-          }
-        }
-      });
   }
 
   cleanupQueryParams(params: Record<string, string> = {}) {

apps/page/catalog/src/lib/article-search/article-search.module.ts

@@ -6,12 +6,10 @@ import { ArticleSearchComponent } from './article-search.component';
 import { SearchResultsModule } from './search-results/search-results.module';
 import { SearchMainModule } from './search-main/search-main.module';
 import { SearchFilterModule } from './search-filter/search-filter.module';
-import { ArticleSearchService } from './article-search.store';
 
 @NgModule({
   imports: [CommonModule, RouterModule, UiIconModule, SearchResultsModule, SearchMainModule, SearchFilterModule],
   exports: [ArticleSearchComponent],
   declarations: [ArticleSearchComponent],
-  providers: [ArticleSearchService],
 })
 export class ArticleSearchModule {}

apps/page/catalog/src/lib/article-search/article-search.store.ts

@@ -16,7 +16,6 @@ export interface ArticleSearchState {
   hits: number;
   selectedBranch: BranchDTO;
   selectedItemIds: number[];
-  scrollPosition: number;
   defaultSettings?: UISettingsDTO;
 }
 
@@ -44,12 +43,6 @@ export class ArticleSearchService extends ComponentStore<ArticleSearchState> {
     return this.get((s) => s.items);
   }
 
-  scrollPosition$ = this.select((s) => s.scrollPosition);
-
-  get scrollPosition() {
-    return this.get((s) => s.scrollPosition);
-  }
-
   selectedBranch$ = this.select((s) => s.selectedBranch);
 
   get selectedBranch() {
@@ -92,7 +85,6 @@ export class ArticleSearchService extends ComponentStore<ArticleSearchState> {
       searchState: '',
       selectedItemIds: [],
       selectedBranch: undefined,
-      scrollPosition: 0,
     });
     this.setDefaultFilter();
   }
@@ -113,10 +105,6 @@ export class ArticleSearchService extends ComponentStore<ArticleSearchState> {
     this.patchState({ selectedBranch });
   }
 
-  setScrollPosition(scrollPosition: number) {
-    this.patchState({ scrollPosition });
-  }
-
   async setDefaultFilter(defaultQueryParams?: Record<string, string>) {
     const defaultSettings = await this.catalog.getSettings().toPromise();
 
@@ -160,7 +148,7 @@ export class ArticleSearchService extends ComponentStore<ArticleSearchState> {
     }
   }
 
-  search = this.effect((options$: Observable<{ clear?: boolean; orderBy?: boolean }>) =>
+  search = this.effect((options$: Observable<{ clear?: boolean; orderBy?: boolean; doNotTrack?: boolean }>) =>
     options$.pipe(
       tap((options) => {
         this.searchStarted.next({ clear: options?.clear });
@@ -178,6 +166,7 @@ export class ArticleSearchService extends ComponentStore<ArticleSearchState> {
           take: 25,
           friendlyName: this.friendlyName,
           stockId: selectedBranch?.id,
+          doNotTrack: options?.doNotTrack,
         }).pipe(
           tapResponse(
             (res) => {

apps/page/catalog/src/lib/article-search/search-filter/search-filter.component.ts

@@ -6,7 +6,7 @@ import { map, takeUntil, withLatestFrom } from 'rxjs/operators';
 import { ArticleSearchService } from '../article-search.store';
 import { ActivatedRoute } from '@angular/router';
 import { ProductCatalogNavigationService } from '@shared/services';
-import { Filter, FilterComponent, FilterInput } from 'apps/shared/components/filter/src/lib';
+import { Filter, FilterComponent } from 'apps/shared/components/filter/src/lib';
 
 @Component({
   selector: 'page-article-search-filter',
@@ -28,10 +28,6 @@ export class ArticleSearchFilterComponent implements OnInit, OnDestroy {
 
   showFilter: boolean = false;
 
-  get isDesktop() {
-    return this._environment.matchDesktop();
-  }
-
   get isTablet() {
     return this._environment.matchTablet();
   }
@@ -62,7 +58,7 @@ export class ArticleSearchFilterComponent implements OnInit, OnDestroy {
     }
   }
 
-  private _onDestroy$ = new Subject();
+  private _onDestroy$ = new Subject<void>();
 
   constructor(
     private articleSearch: ArticleSearchService,
@@ -92,6 +88,26 @@ export class ArticleSearchFilterComponent implements OnInit, OnDestroy {
 
       await this.articleSearch.setDefaultFilter(queryParams);
     });
+
+    this.articleSearch.searchCompleted
+      .pipe(takeUntil(this._onDestroy$), withLatestFrom(this._processId$))
+      .subscribe(async ([searchCompleted, processId]) => {
+        if (searchCompleted.state.searchState === '') {
+          const params = searchCompleted.state.filter.getQueryParams();
+          if (searchCompleted.state.hits === 1) {
+            const item = searchCompleted.state.items.find((f) => f);
+            await this._navigationService
+              .getArticleDetailsPath({
+                processId,
+                itemId: item.id,
+                extras: { queryParams: params },
+              })
+              .navigate();
+          } else {
+            await this._navigationService.getArticleSearchResultsPath(processId, { queryParams: params }).navigate();
+          }
+        }
+      });
   }
 
   ngOnDestroy(): void {
@@ -106,17 +122,17 @@ export class ArticleSearchFilterComponent implements OnInit, OnDestroy {
       .pipe(takeUntil(this._onDestroy$), withLatestFrom(this._processId$))
       .subscribe(async ([searchCompleted, processId]) => {
         if (searchCompleted.state.searchState === '') {
-          // Check if desktop is necessary, otherwise it would trigger navigation twice (Inside Article-Search.component and here)
-          if (searchCompleted.state.hits === 1 && !this.isDesktop) {
+          const params = searchCompleted.state.filter.getQueryParams();
+          if (searchCompleted.state.hits === 1) {
             const item = searchCompleted.state.items.find((f) => f);
             await this._navigationService
               .getArticleDetailsPath({
                 processId,
                 itemId: item.id,
+                extras: { queryParams: params },
               })
               .navigate();
-          } else if (!this.isDesktop) {
-            const params = searchCompleted.state.filter.getQueryParams();
+          } else {
             await this._navigationService.getArticleSearchResultsPath(processId, { queryParams: params }).navigate();
           }
         }

apps/page/catalog/src/lib/article-search/search-main/search-main.component.html

@@ -1,8 +1,6 @@
 <div class="bg-white rounded py-10 px-4 text-center shadow-[0_-2px_24px_0_#dce2e9] h-full">
   <h1 class="text-h3 text-[1.625rem] font-bold mb-[0.375rem]">Artikelsuche</h1>
-  <p class="text-lg mb-10">
-    Welchen Artikel suchen Sie?
-  </p>
+  <p class="text-lg mb-10">Welchen Artikel suchen Sie?</p>
   <ng-container *ngIf="filter$ | async; let filter">
     <shared-filter-filter-group-main
       class="mb-8 w-full"
@@ -38,6 +36,9 @@
           <button
             class="flex flex-row items-center outline-none border-none bg-white text-black text-p2 m-0 p-0"
             (click)="setQueryHistory(filter, recentQuery.friendlyName)"
+            matomoClickCategory="search"
+            matomoClickAction="click"
+            matomoClickName="recent-search"
           >
             <shared-icon
               class="flex w-8 h-8 justify-center items-center mr-3 rounded-full text-black bg-[#edeff0]"

apps/page/catalog/src/lib/article-search/search-main/search-main.component.ts

@@ -4,11 +4,12 @@ import { BreadcrumbService } from '@core/breadcrumb';
 import { ApplicationService } from '@core/application';
 import { DomainCatalogService } from '@domain/catalog';
 import { combineLatest, NEVER, Subscription } from 'rxjs';
-import { catchError, debounceTime, first, switchMap, map } from 'rxjs/operators';
+import { catchError, debounceTime, first, switchMap, map, tap } from 'rxjs/operators';
 import { ArticleSearchService } from '../article-search.store';
 import { isEqual } from 'lodash';
 import { EnvironmentService } from '@core/environment';
 import { Filter, FilterInputGroupMainComponent } from 'apps/shared/components/filter/src/lib';
+import { ProductCatalogNavigationService } from '@shared/services';
 
 @Component({
   selector: 'page-article-search-main',
@@ -17,7 +18,10 @@ import { Filter, FilterInputGroupMainComponent } from 'apps/shared/components/fi
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ArticleSearchMainComponent implements OnInit, OnDestroy {
-  readonly history$ = this.catalog.getSearchHistory({ take: 7 }).pipe(catchError(() => NEVER));
+  readonly history$ = this.catalog.getSearchHistory({ take: 7 }).pipe(
+    map((history) => history.filter((h) => !!h.friendlyName)),
+    catchError(() => NEVER)
+  );
 
   fetching$ = this.searchService.fetching$;
 
@@ -49,7 +53,8 @@ export class ArticleSearchMainComponent implements OnInit, OnDestroy {
     private route: ActivatedRoute,
     private application: ApplicationService,
     private breadcrumb: BreadcrumbService,
-    private _environment: EnvironmentService
+    private _environment: EnvironmentService,
+    private _navigationService: ProductCatalogNavigationService
   ) {}
 
   ngOnInit() {
@@ -77,6 +82,14 @@ export class ArticleSearchMainComponent implements OnInit, OnDestroy {
           }
 
           this.removeResultsAndDetailsBreadcrumbs(processId);
+
+          // #4519 und #4520 Durch den Performance Umbau, wird auf allen größen kleiner als der Splitscreen die Article-Search Komponente nicht geladen
+          // Stattdessen werden die Komponenten search-main und search-filter geladen. Einige Funktionen von Article-Search müssen trotzdem aufgerufen werden
+          if (!this._environment.matchDesktopLarge()) {
+            this.resetFilter(queryParams);
+            this.removeCheckoutBreadcrumb(processId);
+            this.addOrUpdateBreadcrumbs(processId, queryParams);
+          }
         })
     );
 
@@ -160,6 +173,27 @@ export class ArticleSearchMainComponent implements OnInit, OnDestroy {
     });
   }
 
+  resetFilter(queryParams: Record<string, string>) {
+    if (Object.keys(queryParams).length === 0) {
+      this.searchService.resetFilter();
+    }
+  }
+
+  async removeCheckoutBreadcrumb(processId: number) {
+    this.breadcrumb.removeBreadcrumbsByKeyAndTags(processId, ['checkout']);
+  }
+
+  async addOrUpdateBreadcrumbs(processId: number, queryParams: Record<string, string>) {
+    await this.breadcrumb.addBreadcrumbIfNotExists({
+      key: processId,
+      name: 'Artikelsuche',
+      path: this._navigationService.getArticleSearchBasePath(processId).path,
+      params: queryParams,
+      tags: ['catalog', 'main'],
+      section: 'customer',
+    });
+  }
+
   async removeResultsAndDetailsBreadcrumbs(processId: number) {
     const resultsCrumbs = await this.breadcrumb.getBreadcrumbsByKeyAndTags$(processId, ['catalog', 'results']).pipe(first()).toPromise();
     const detailCrumbs = await this.breadcrumb.getBreadcrumbsByKeyAndTags$(processId, ['catalog', 'details']).pipe(first()).toPromise();

apps/page/catalog/src/lib/article-search/search-main/search-main.module.ts

@@ -4,9 +4,10 @@ import { ArticleSearchMainComponent } from './search-main.component';
 import { FilterModule } from '@shared/components/filter';
 import { RouterModule } from '@angular/router';
 import { IconComponent, IconModule } from '@shared/components/icon';
+import { MatomoModule } from 'ngx-matomo-client';
 
 @NgModule({
-  imports: [CommonModule, RouterModule, IconComponent, FilterModule, IconModule],
+  imports: [CommonModule, RouterModule, IconComponent, FilterModule, IconModule, MatomoModule],
   exports: [ArticleSearchMainComponent],
   declarations: [ArticleSearchMainComponent],
   providers: [],

apps/page/catalog/src/lib/article-search/search-results/search-result-item.component.html

@@ -1,14 +1,11 @@
-<a
+<div
   class="page-search-result-item__item-card hover p-5 desktop-small:px-4 desktop-small:py-[0.625rem] h-[13.25rem] desktop-small:h-[11.3125rem] bg-white border border-solid border-transparent rounded"
   [class.page-search-result-item__item-card-primary]="primaryOutletActive"
-  [routerLink]="detailsPath"
-  [routerLinkActive]="!isTablet && !primaryOutletActive ? 'active' : ''"
-  queryParamsHandling="preserve"
-  (click)="isDesktopLarge ? scrollIntoView() : ''"
+  [class.active]="isActive"
 >
   <div class="page-search-result-item__item-thumbnail text-center mr-4 w-[3.125rem] h-[4.9375rem]">
     <img
-      class="page-search-result-item__item-image w-[3.125rem] h-[4.9375rem]"
+      class="page-search-result-item__item-image w-[3.125rem] max-h-[4.9375rem]"
       loading="lazy"
       *ngIf="item?.imageId | thumbnailUrl; let thumbnailUrl"
       [src]="thumbnailUrl"
@@ -70,7 +67,7 @@
       class="page-search-result-item__item-price desktop-small:text-p3 font-bold justify-self-end"
       [class.page-search-result-item__item-price-primary]="primaryOutletActive"
     >
-      {{ item?.catalogAvailability?.price?.value?.value | currency: 'EUR':'code' }}
+      {{ item?.catalogAvailability?.price?.value?.value | currency: 'EUR' : 'code' }}
     </div>
 
     <div class="page-search-result-item__item-select-bullet justify-self-end">
@@ -78,9 +75,14 @@
         *ngIf="selectable"
         (click)="$event.stopPropagation()"
         [ngModel]="selected"
-        (ngModelChange)="setSelected()"
+        (ngModelChange)="
+          setSelected();
+          tracker.trackEvent({ category: 'Trefferliste', action: 'select', name: item.product.name, value: selected ? 1 : 0 })
+        "
         class="isa-select-bullet"
         type="checkbox"
+        matomoTracker
+        #tracker="matomo"
       />
     </div>
 
@@ -122,4 +124,4 @@
       </ng-container>
     </div>
   </div>
-</a>
+</div>

apps/page/catalog/src/lib/article-search/search-results/search-result-item.component.ts

@@ -1,5 +1,5 @@
 import { DatePipe } from '@angular/common';
-import { Component, ChangeDetectionStrategy, Input, EventEmitter, Output, HostBinding, ElementRef } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, EventEmitter, Output, HostBinding } from '@angular/core';
 import { ApplicationService } from '@core/application';
 import { EnvironmentService } from '@core/environment';
 import { DomainAvailabilityService, DomainInStockService } from '@domain/availability';
@@ -54,6 +54,8 @@ export class SearchResultItemComponent extends ComponentStore<SearchResultItemCo
   @Input()
   primaryOutletActive?: boolean = false;
 
+  @Input() isActive: boolean;
+
   @Output()
   selectedChange = new EventEmitter<ItemDTO>();
 
@@ -82,11 +84,6 @@ export class SearchResultItemComponent extends ComponentStore<SearchResultItemCo
     return this._environment.matchDesktopLarge();
   }
 
-  get detailsPath() {
-    return this._navigationService.getArticleDetailsPath({ processId: this.applicationService.activatedProcessId, itemId: this.item?.id })
-      .path;
-  }
-
   get resultsPath() {
     return this._navigationService.getArticleSearchResultsPath(this.applicationService.activatedProcessId).path;
   }
@@ -141,7 +138,6 @@ export class SearchResultItemComponent extends ComponentStore<SearchResultItemCo
     private _availability: DomainAvailabilityService,
     private _environment: EnvironmentService,
     private _navigationService: ProductCatalogNavigationService,
-    private _elRef: ElementRef<HTMLElement>,
     private _store: Store
   ) {
     super({
@@ -150,10 +146,6 @@ export class SearchResultItemComponent extends ComponentStore<SearchResultItemCo
     });
   }
 
-  scrollIntoView() {
-    this._elRef.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
-  }
-
   setSelected() {
     const isSelected = this._articleSearchService.selectedItemIds.includes(this.item?.id);
     this._articleSearchService.setSelected({ selected: !isSelected, itemId: this.item?.id });

apps/page/catalog/src/lib/article-search/search-results/search-results.component.html

@@ -11,7 +11,7 @@
       [hint]="searchboxHint$ | async"
       [loading]="fetching$ | async"
       [inputGroup]="filter?.input | group: 'main'"
-      (search)="search({filter, clear: true})"
+      (search)="search({ filter, clear: true })"
       [showDescription]="false"
       [scanner]="true"
     ></shared-filter-input-group-main>
@@ -32,43 +32,78 @@
     class="page-search-results__items-count inline-flex flex-row items-center pr-5 text-p3"
     [class.mb-4]="primaryOutletActive$ | async"
   >
-    {{ hits ??
-      0 }}
+    {{ hits ?? 0 }}
     Titel
   </div>
 </div>
 
 <div class="page-search-results__order-by mb-[0.125rem]" [class.page-search-results__order-by-primary]="primaryOutletActive$ | async">
   <shared-order-by-filter
-    [orderBy]="(filter$ | async)?.orderBy"
-    (selectedOrderByChange)="search({ clear: true, orderBy: true }); updateBreadcrumbs()"
+    *ngIf="filter$ | async; let filter"
+    [orderBy]="filter?.orderBy"
+    (selectedOrderByChange)="search({ filter, clear: true, orderBy: true }); updateBreadcrumbs()"
   >
   </shared-order-by-filter>
 </div>
 
-<div class="h-full relative">
-  <cdk-virtual-scroll-viewport
-    #scrollContainer
-    class="product-list h-full"
-    [itemSize]="(primaryOutletActive$ | async) ? 98 : 181"
-    minBufferPx="1200"
-    [maxBufferPx]="maxBufferCdkScrollContainer$ | async"
-    (scrolledIndexChange)="scrolledIndexChange($event)"
-  >
-    <search-result-item
-      class="page-search-results__result-item"
-      [class.page-search-results__result-item-primary]="primaryOutletActive$ | async"
-      *cdkVirtualFor="let item of results$ | async; trackBy: trackByItemId"
-      (selectedChange)="addToCart($event)"
-      [selected]="isSelected(item)"
-      [selectable]="isSelectable(item)"
-      [item]="item"
-      [primaryOutletActive]="primaryOutletActive$ | async"
-    ></search-result-item>
-    <page-search-result-item-loading
-      [primaryOutletActive]="primaryOutletActive$ | async"
-      *ngIf="fetching$ | async"
-    ></page-search-result-item-loading>
+<ng-container *ngIf="primaryOutletActive$ | async; else sideOutlet">
+  <cdk-virtual-scroll-viewport class="product-list" [itemSize]="103 * (scale$ | async)" (scrolledIndexChange)="scrolledIndexChange($event)">
+    <a
+      *cdkVirtualFor="let item of results$ | async; let i = index; trackBy: trackByItemId"
+      [routerLink]="getDetailsPath(item.id)"
+      routerLinkActive
+      #rla="routerLinkActive"
+      queryParamsHandling="preserve"
+      (click)="scrollToItem(i)"
+    >
+      <search-result-item
+        class="page-search-results__result-item page-search-results__result-item-primary"
+        (selectedChange)="addToCart($event)"
+        [selected]="isSelected(item)"
+        [selectable]="isSelectable(item)"
+        [item]="item"
+        [primaryOutletActive]="true"
+        [isActive]="rla.isActive"
+      ></search-result-item>
+    </a>
+    <page-search-result-item-loading [primaryOutletActive]="true" *ngIf="fetching$ | async"></page-search-result-item-loading>
+  </cdk-virtual-scroll-viewport>
+  <div class="actions z-sticky h-0">
+    <button
+      [disabled]="loading$ | async"
+      *ngIf="(selectedItemIds$ | async)?.length > 0"
+      class="cta-cart cta-action-primary"
+      (click)="addToCart()"
+      matomoClickCategory="Trefferliste"
+      matomoClickAction="click"
+      matomoClickName="In den Warenkorb legen"
+    >
+      <ui-spinner [show]="loading$ | async">In den Warenkorb legen</ui-spinner>
+    </button>
+  </div>
+</ng-container>
+
+<ng-template #sideOutlet>
+  <cdk-virtual-scroll-viewport class="product-list" [itemSize]="191 * (scale$ | async)" (scrolledIndexChange)="scrolledIndexChange($event)">
+    <a
+      *cdkVirtualFor="let item of results$ | async; let i = index; trackBy: trackByItemId"
+      [routerLink]="getDetailsPath(item.id)"
+      routerLinkActive
+      #rla="routerLinkActive"
+      queryParamsHandling="preserve"
+      (click)="scrollToItem(i)"
+    >
+      <search-result-item
+        class="page-search-results__result-item"
+        (selectedChange)="addToCart($event)"
+        [selected]="isSelected(item)"
+        [selectable]="isSelectable(item)"
+        [item]="item"
+        [primaryOutletActive]="false"
+        [isActive]="rla.isActive"
+      ></search-result-item>
+    </a>
+    <page-search-result-item-loading [primaryOutletActive]="false" *ngIf="fetching$ | async"></page-search-result-item-loading>
   </cdk-virtual-scroll-viewport>
   <div class="actions z-sticky h-0">
     <button
@@ -80,4 +115,4 @@
       <ui-spinner [show]="loading$ | async">In den Warenkorb legen</ui-spinner>
     </button>
   </div>
-</div>
+</ng-template>

apps/page/catalog/src/lib/article-search/search-results/search-results.component.scss

@@ -1,5 +1,5 @@
 :host {
-  @apply box-border grid h-split-screen-tablet desktop-small:h-split-screen-desktop;
+  @apply box-border grid h-split-screen-tablet desktop-small:h-split-screen-desktop relative;
   grid-template-rows: auto auto 1fr;
 }
 
@@ -8,7 +8,7 @@
 }
 
 .page-search-results__result-item {
-  @apply mb-px-10;
+  @apply mb-[0.625rem];
 }
 
 .page-search-results__result-item-primary {

apps/page/catalog/src/lib/article-search/search-results/search-results.component.ts

@@ -9,8 +9,9 @@ import {
   QueryList,
   TrackByFunction,
   AfterViewInit,
+  inject,
 } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { ApplicationService } from '@core/application';
 import { BreadcrumbService } from '@core/breadcrumb';
 import { EnvironmentService } from '@core/environment';
@@ -28,6 +29,8 @@ import { SearchResultItemComponent } from './search-result-item.component';
 import { ProductCatalogNavigationService } from '@shared/services';
 import { Filter, FilterInputGroupMainComponent } from 'apps/shared/components/filter/src/lib';
 import { DomainAvailabilityService, ItemData } from '@domain/availability';
+import { asapScheduler } from 'rxjs';
+import { ShellService } from '@shared/shell';
 
 @Component({
   selector: 'page-search-results',
@@ -37,7 +40,7 @@ import { DomainAvailabilityService, ItemData } from '@domain/availability';
 })
 export class ArticleSearchResultsComponent implements OnInit, OnDestroy, AfterViewInit {
   @ViewChildren(SearchResultItemComponent) listItems: QueryList<SearchResultItemComponent>;
-  @ViewChild('scrollContainer', { static: true })
+  @ViewChild(CdkVirtualScrollViewport, { static: false })
   scrollContainer: CdkVirtualScrollViewport;
 
   @ViewChild(FilterInputGroupMainComponent, { static: false })
@@ -59,6 +62,10 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy, AfterVi
     })
   );
 
+  getProcessId(): number {
+    return this.application.activatedProcessId;
+  }
+
   loading$ = new BehaviorSubject<boolean>(false);
 
   private subscriptions = new Subscription();
@@ -92,20 +99,11 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy, AfterVi
     return this._environment.matchDesktop$.pipe(map((matches) => matches && this.route.outlet === 'primary'));
   }
 
-  // Ticket #4169 Splitscreen
-  // Render genug Artikel um bei Navigation auf Trefferliste | PDP zum angewählten Artikel zu Scrollen
-  maxBufferCdkScrollContainer$ = this.results$.pipe(
-    withLatestFrom(this.primaryOutletActive$),
-    map(([results, primaryOutlet]) => {
-      if (!primaryOutlet && results?.length > 0) {
-        // Splitscreen mode: Items Length * Item Pixel Height
-        const maxBufferSize = results.length * 181;
-        return maxBufferSize >= 1200 ? maxBufferSize : 1200;
-      } else {
-        return 1200;
-      }
-    })
-  );
+  private readonly SCROLL_INDEX_TOKEN = 'CATALOG_RESULTS_LIST_SCROLL_INDEX';
+
+  shellService = inject(ShellService);
+
+  scale$ = this.shellService.scale$;
 
   constructor(
     public searchService: ArticleSearchService,
@@ -117,7 +115,8 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy, AfterVi
     private _checkoutService: DomainCheckoutService,
     private _environment: EnvironmentService,
     private _navigationService: ProductCatalogNavigationService,
-    private _availability: DomainAvailabilityService
+    private _availability: DomainAvailabilityService,
+    private _router: Router
   ) {}
 
   ngOnInit() {
@@ -156,9 +155,8 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy, AfterVi
 
           const cleanQueryParams = this.cleanupQueryParams(queryParams);
 
-          // Scroll to scroll_position in great result list
-          if (!!queryParams?.scroll_position && this.route.outlet === 'primary') {
-            this.scrollTop(Number(queryParams.scroll_position ?? 0));
+          if (processChanged) {
+            this.scrollToItem(this._getScrollIndexFromCache());
           }
 
           if (!isEqual(cleanQueryParams, this.cleanupQueryParams(this.searchService.filter.getQueryParams()))) {
@@ -174,11 +172,6 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy, AfterVi
             ) {
               this.search({ clear: true });
             } else {
-              if (!this.isDesktopLarge || this.route.outlet === 'primary') {
-                this.scrollTop(Number(queryParams.scroll_position ?? 0));
-              } else {
-                this.scrollItemIntoView();
-              }
               const selectedItemIds: Array<string> = queryParams?.selected_item_ids?.split(',') ?? [];
               for (const id of selectedItemIds) {
                 if (id) {
@@ -206,9 +199,9 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy, AfterVi
         .subscribe(async ([searchCompleted, processId]) => {
           const params = searchCompleted.state.filter.getQueryParams();
           if (searchCompleted.state.searchState === '') {
-            // Keine Navigation bei OrderBy
+            // Ticket 4524 Korrekte Navigation bei orderBy mit aktuellen queryParams
             if (searchCompleted?.orderBy) {
-              return;
+              return await this._router.navigate([], { queryParams: params });
             }
 
             // Navigation auf Details bzw. Results | Details wenn hits 1
@@ -216,7 +209,6 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy, AfterVi
             if (searchCompleted.state.hits === 1) {
               const item = searchCompleted.state.items.find((f) => f);
               const ean = this.route?.snapshot?.params?.ean;
-              const itemId = this.route?.snapshot?.params?.id ? Number(this.route?.snapshot?.params?.id) : item.id; // Nicht zum ersten Item der Liste springen wenn bereits eines selektiert ist
 
               // Navigation from Cart uses ean
               if (!!ean) {
@@ -231,13 +223,25 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy, AfterVi
                 await this._navigationService
                   .getArticleDetailsPath({
                     processId,
-                    itemId,
+                    itemId: item.id,
                     extras: { queryParams: params },
                   })
                   .navigate();
               }
-            } else if ((searchCompleted?.clear || this.route.outlet === 'primary') && this.isDesktopLarge) {
-              await this._navigationService.getArticleSearchResultsPath(processId, { queryParams: params }).navigate();
+            } else if (searchCompleted?.clear || this.route.outlet === 'primary') {
+              const ean = this.route?.snapshot?.params?.ean;
+
+              if (ean) {
+                await this._navigationService
+                  .getArticleDetailsPathByEan({
+                    processId,
+                    ean,
+                    extras: { queryParams: params },
+                  })
+                  .navigate();
+              } else {
+                await this._navigationService.getArticleSearchResultsPath(processId, { queryParams: params }).navigate();
+              }
             }
           }
         })
@@ -259,7 +263,41 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy, AfterVi
   }
 
   ngAfterViewInit(): void {
-    this.scrollItemIntoView();
+    this.scrollToItem(this._getScrollIndexFromCache());
+  }
+
+  private _addScrollIndexToCache(index: number): void {
+    this.cache.set<number>({ processId: this.getProcessId(), token: this.SCROLL_INDEX_TOKEN }, index);
+  }
+
+  private _getScrollIndexFromCache(): number {
+    return this.cache.get<number>({ processId: this.getProcessId(), token: this.SCROLL_INDEX_TOKEN }) ?? 0;
+  }
+
+  scrollToItem(i?: number) {
+    let index = i;
+
+    if (!index) {
+      index = this._getScrollIndexFromCache();
+    } else {
+      this._addScrollIndexToCache(index);
+    }
+
+    asapScheduler.schedule(() => {
+      this.scrollContainer.scrollToIndex(index, 'smooth');
+    }, 150);
+  }
+
+  scrolledIndexChange(index: number) {
+    const completeListFetched = this.searchService.items.length === this.searchService.hits;
+
+    if (index && !completeListFetched && this.searchService.items.length <= this.scrollContainer?.getRenderedRange()?.end) {
+      this.search({ clear: false });
+    }
+
+    if (this.getProcessId() === this.searchService.processId) {
+      this._addScrollIndexToCache(index);
+    }
   }
 
   async ngOnDestroy() {
@@ -290,42 +328,17 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy, AfterVi
       this.sharedFilterInputGroupMain.cancelAutocomplete();
     }
 
-    this.searchService.search({ clear, orderBy });
+    this.searchService.search({ clear, orderBy, doNotTrack: true });
   }
 
-  scrollTop(scrollPos: number) {
-    setTimeout(() => this.scrollContainer.scrollTo({ top: scrollPos }), 0);
-  }
-
-  scrollItemIntoView() {
-    setTimeout(() => {
-      const item = this.listItems?.find((item) => item.item.id === Number(this.route?.snapshot?.params?.id));
-      item?.scrollIntoView();
-    }, 0);
-  }
-
-  async scrolledIndexChange(index: number) {
-    const results = await this.results$.pipe(first()).toPromise();
-    const hits = await this.hits$.pipe(first()).toPromise();
-
-    if (results.length >= hits) {
-      return;
-    }
-
-    if (this.route.outlet === 'primary') {
-      this.searchService.setScrollPosition(this.scrollContainer.measureScrollOffset('top'));
-    }
-
-    if (index >= results.length - 20 && results.length - 20 > 0) {
-      this.search({ clear: false });
-    }
+  getDetailsPath(itemId: number) {
+    return this._navigationService.getArticleDetailsPath({ processId: this.application.activatedProcessId, itemId }).path;
   }
 
   async updateBreadcrumbs(
     processId: number = this.searchService.processId,
     queryParams: Record<string, string> = this.searchService.filter?.getQueryParams()
   ) {
-    const scroll_position = this.searchService.scrollPosition;
     const selected_item_ids = this.searchService?.selectedItemIds?.toString();
 
     if (queryParams) {
@@ -335,7 +348,7 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy, AfterVi
         .toPromise();
 
       const name = queryParams.main_qs ? queryParams.main_qs : 'Alle Artikel';
-      const params = { ...queryParams, scroll_position, selected_item_ids };
+      const params = { ...queryParams, selected_item_ids };
 
       for (const crumb of crumbs) {
         this.breadcrumb.patchBreadcrumb(crumb.id, {
@@ -388,7 +401,6 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy, AfterVi
 
   cleanupQueryParams(params: Record<string, string> = {}) {
     const clean = { ...params };
-    delete clean['scroll_position'];
     delete clean['selected_item_ids'];
 
     for (const key in clean) {
@@ -480,6 +492,9 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy, AfterVi
         // #4180 Für Download Artikel muss hier immer zwingend der logistician gesetzt werden, da diese Artikel direkt zugeordnet dem Warenkorb hinzugefügt werden
         const downloadAvailability = await this._availability.getDownloadAvailability({ item: downloadItem }).pipe(first()).toPromise();
         shoppingCartItem.destination = { data: { target: 16, logistician: downloadAvailability?.logistician } };
+        if (downloadAvailability) {
+          shoppingCartItem.availability = { ...shoppingCartItem.availability, ...downloadAvailability };
+        }
         canAddItemsPayload.push({
           availabilities: [{ ...item.catalogAvailability, format: 'DL' }],
           id: item.product.catalogProductNumber,

apps/page/catalog/src/lib/article-search/search-results/search-results.module.ts

@@ -19,6 +19,7 @@ import { FilterAutocompleteProvider, FilterModule, OrderByFilterModule } from '@
 import { FocusSearchboxEvent } from '../focus-searchbox.event';
 import { ArticleSearchMainAutocompleteProvider } from '../providers';
 import { IconComponent } from '@shared/components/icon';
+import { MatomoModule } from 'ngx-matomo-client';
 
 @NgModule({
   imports: [
@@ -35,6 +36,7 @@ import { IconComponent } from '@shared/components/icon';
     UiTooltipModule,
     FilterModule,
     IconComponent,
+    MatomoModule,
   ],
   exports: [ArticleSearchResultsComponent, SearchResultItemComponent],
   declarations: [

apps/page/catalog/src/lib/page-catalog-routing.module.ts

@@ -6,24 +6,45 @@ import { ArticleSearchFilterComponent } from './article-search/search-filter/sea
 import { ArticleSearchMainComponent } from './article-search/search-main/search-main.component';
 import { ArticleSearchResultsComponent } from './article-search/search-results/search-results.component';
 import { PageCatalogComponent } from './page-catalog.component';
+import { MatomoRouteData } from 'ngx-matomo-client';
 
 const routes: Routes = [
   {
     path: '',
     component: PageCatalogComponent,
+    data: {
+      matomo: {
+        title: 'Artikelsuche',
+      } as MatomoRouteData,
+    },
     children: [
       {
         path: 'filter',
         component: ArticleSearchFilterComponent,
+        data: {
+          matomo: {
+            title: 'Artikelsuche - Filter',
+          } as MatomoRouteData,
+        },
       },
       {
         path: 'filter/:id',
         component: ArticleSearchFilterComponent,
+        data: {
+          matomo: {
+            title: 'Artikelsuche - Filter',
+          } as MatomoRouteData,
+        },
       },
       {
         path: 'search',
         component: ArticleSearchComponent,
         outlet: 'side',
+        data: {
+          matomo: {
+            title: 'Artikelsuche',
+          } as MatomoRouteData,
+        },
         children: [
           {
             path: '',
@@ -34,29 +55,59 @@ const routes: Routes = [
       {
         path: 'results',
         component: ArticleSearchResultsComponent,
+        data: {
+          matomo: {
+            title: 'Artikelsuche - Trefferliste',
+          } as MatomoRouteData,
+        },
       },
       {
         path: 'results',
         component: ArticleSearchResultsComponent,
         outlet: 'side',
+        data: {
+          matomo: {
+            title: 'Artikelsuche - Trefferliste',
+          } as MatomoRouteData,
+        },
       },
       {
         path: 'results/:id',
         component: ArticleSearchResultsComponent,
         outlet: 'side',
+        data: {
+          matomo: {
+            title: 'Artikelsuche - Artikeldetails',
+          } as MatomoRouteData,
+        },
       },
       {
         path: 'results/:ean/ean',
         component: ArticleSearchResultsComponent,
         outlet: 'side',
+        data: {
+          matomo: {
+            title: 'Artikelsuche - Artikeldetails (EAN)',
+          } as MatomoRouteData,
+        },
       },
       {
         path: 'details/:id',
         component: ArticleDetailsComponent,
+        data: {
+          matomo: {
+            title: 'Artikelsuche - Artikeldetails (ID)',
+          } as MatomoRouteData,
+        },
       },
       {
         path: 'details/:ean/ean',
         component: ArticleDetailsComponent,
+        data: {
+          matomo: {
+            title: 'Artikelsuche - Artikeldetails (EAN)',
+          } as MatomoRouteData,
+        },
       },
       {
         path: '',

apps/page/catalog/src/lib/page-catalog.component.ts

@@ -11,12 +11,14 @@ import { combineLatest, fromEvent, Observable, Subject } from 'rxjs';
 import { first, map, switchMap, takeUntil, withLatestFrom } from 'rxjs/operators';
 import { ActionsSubject } from '@ngrx/store';
 import { DomainAvailabilityService } from '@domain/availability';
+import { provideComponentStore } from '@ngrx/component-store';
+import { ArticleSearchService } from './article-search/article-search.store';
 
 @Component({
   selector: 'page-catalog',
   templateUrl: 'page-catalog.component.html',
   styleUrls: ['page-catalog.component.scss'],
-  providers: [],
+  providers: [provideComponentStore(ArticleSearchService)],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PageCatalogComponent implements OnInit, AfterViewInit, OnDestroy {
@@ -31,7 +33,7 @@ export class PageCatalogComponent implements OnInit, AfterViewInit, OnDestroy {
     return `${this.breadcrumbRef?.nativeElement?.clientWidth}px`;
   }
 
-  _onDestroy$ = new Subject<boolean>();
+  _onDestroy$ = new Subject<void>();
 
   get isTablet$() {
     return this._environmentService.matchTablet$;

apps/page/checkout/src/lib/checkout-dummy/checkout-dummy-data.ts

@@ -1,3 +1,5 @@
 import { ShoppingCartItemDTO } from '@swagger/checkout';
 
-export interface CheckoutDummyData extends ShoppingCartItemDTO {}
+export interface CheckoutDummyData extends ShoppingCartItemDTO {
+  changeDataFromCart?: boolean;
+}

apps/page/checkout/src/lib/checkout-dummy/checkout-dummy.component.ts

@@ -1,6 +1,5 @@
 import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
-import { Router } from '@angular/router';
 import { ApplicationService } from '@core/application';
 import { ItemDTO } from '@swagger/cat';
 import { DateAdapter } from '@ui/common';
@@ -9,7 +8,8 @@ import { Subject } from 'rxjs';
 import { first, shareReplay, takeUntil } from 'rxjs/operators';
 import { CheckoutDummyData } from './checkout-dummy-data';
 import { CheckoutDummyStore } from './checkout-dummy.store';
-import { CheckoutNavigationService } from '@shared/services';
+import { CheckoutNavigationService, CustomerSearchNavigation } from '@shared/services';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'page-checkout-dummy',
@@ -38,14 +38,15 @@ export class CheckoutDummyComponent implements OnInit, OnDestroy {
   _onDestroy$ = new Subject<void>();
 
   constructor(
-    private _router: Router,
     private _fb: UntypedFormBuilder,
     private _dateAdapter: DateAdapter,
     private _modal: UiModalService,
     private _store: CheckoutDummyStore,
     private _ref: UiModalRef<any, CheckoutDummyData>,
     private readonly _applicationService: ApplicationService,
-    private readonly _checkoutNavigationService: CheckoutNavigationService
+    private readonly _checkoutNavigationService: CheckoutNavigationService,
+    private readonly _customerNavigationService: CustomerSearchNavigation,
+    private _router: Router
   ) {}
 
   ngOnInit() {
@@ -58,7 +59,7 @@ export class CheckoutDummyComponent implements OnInit, OnDestroy {
       }
     });
 
-    if (!!this._ref?.data && Object.keys(this._ref?.data).length !== 0) {
+    if (this.hasShoppingCartItemToUpdate()) {
       const data = this._ref?.data;
       this._store.patchState({ shoppingCartItem: data });
       this.populateFormFromModalData(data);
@@ -149,6 +150,14 @@ export class CheckoutDummyComponent implements OnInit, OnDestroy {
     this.control.markAsUntouched();
   }
 
+  hasShoppingCartItemToUpdate(): boolean {
+    const hasShoppingCartItem = !!this._ref.data?.id;
+    if (!!this._ref?.data && hasShoppingCartItem) {
+      return true;
+    }
+    return false;
+  }
+
   async nextItem() {
     if (this.control.invalid || this.control.disabled) {
       this.control.enable();
@@ -158,7 +167,7 @@ export class CheckoutDummyComponent implements OnInit, OnDestroy {
 
     try {
       const branch = await this._store.currentBranch$.pipe(first()).toPromise();
-      if (!!this._ref?.data && Object.keys(this._ref?.data).length !== 0) {
+      if (this.hasShoppingCartItemToUpdate()) {
         await this._store.createAddToCartItem(this.control, branch, true);
         this._store.updateCart(() => {});
       } else {
@@ -187,16 +196,17 @@ export class CheckoutDummyComponent implements OnInit, OnDestroy {
 
     try {
       const branch = await this._store.currentBranch$.pipe(first()).toPromise();
-      if (!!this._ref?.data && Object.keys(this._ref?.data).length !== 0) {
+      if (this.hasShoppingCartItemToUpdate()) {
         await this._store.createAddToCartItem(this.control, branch, true);
         this._store.updateCart(async () => {
           // Set filter for navigation to customer search if customer is not set
           const customer = await this._store.customer$.pipe(first()).toPromise();
           const customerFilter = await this._store.customerFilter$.pipe(first()).toPromise();
           let filter: { [key: string]: string };
-          if (!customer) {
+          if (!customer && !this._ref?.data?.changeDataFromCart) {
             filter = customerFilter;
-            this._router.navigate(['/kunde', this._applicationService.activatedProcessId, 'customer', 'search'], {
+            const path = this._customerNavigationService.defaultRoute({ processId: this._applicationService.activatedProcessId }).path;
+            await this._router.navigate(path, {
               queryParams: { customertype: filter.customertype },
             });
           } else {
@@ -211,9 +221,10 @@ export class CheckoutDummyComponent implements OnInit, OnDestroy {
           const customer = await this._store.customer$.pipe(first()).toPromise();
           const customerFilter = await this._store.customerFilter$.pipe(first()).toPromise();
           let filter: { [key: string]: string };
-          if (!customer) {
+          if (!customer && !this._ref?.data?.changeDataFromCart) {
             filter = customerFilter;
-            this._router.navigate(['/kunde', this._applicationService.activatedProcessId, 'customer', 'search'], {
+            const path = this._customerNavigationService.defaultRoute({ processId: this._applicationService.activatedProcessId }).path;
+            await this._router.navigate(path, {
               queryParams: { customertype: filter.customertype },
             });
           } else {

apps/page/checkout/src/lib/checkout-review/checkout-review.component.html

@@ -14,7 +14,7 @@
 
       <div class="btn-wrapper">
         <a class="cta-primary" [routerLink]="productSearchBasePath">Artikel suchen</a>
-        <button class="cta-secondary" (click)="openDummyModal()">Neuanlage</button>
+        <button class="cta-secondary" (click)="openDummyModal({})">Neuanlage</button>
       </div>
     </div>
   </div>
@@ -54,7 +54,7 @@
               <button
                 *ngIf="group.orderType === 'Dummy'"
                 class="text-brand border-none font-bold text-p1 outline-none pl-4"
-                (click)="openDummyModal()"
+                (click)="openDummyModal({ changeDataFromCart: true })"
               >
                 Hinzufügen
               </button>
@@ -81,8 +81,11 @@
             *ngIf="group?.orderType !== undefined && (item.features?.orderType === 'Abholung' || item.features?.orderType === 'Rücklage')"
           >
             <ng-container *ngIf="item?.destination?.data?.targetBranch?.data; let targetBranch">
-              <ng-container *ngIf="i === 0 || targetBranch.id !== group.items[i - 1].destination?.data?.targetBranch?.data.id">
-                <div class="flex flex-row items-center px-5 pt-0 pb-[0.875rem] -mt-2 bg-[#F5F7FA]">
+              <ng-container *ngIf="i === 0 || checkIfMultipleDestinationsForOrderTypeExist(targetBranch, group, i)">
+                <div
+                  class="flex flex-row items-center px-5 pt-0 pb-[0.875rem] -mt-2 bg-[#F5F7FA]"
+                  [class.multiple-destinations]="checkIfMultipleDestinationsForOrderTypeExist(targetBranch, group, i)"
+                >
                   <span class="branch-name">{{ targetBranch?.name }} | {{ targetBranch | branchAddress }}</span>
                 </div>
                 <hr />

apps/page/checkout/src/lib/checkout-review/checkout-review.component.scss

@@ -105,6 +105,10 @@ h1 {
   }
 }
 
+.multiple-destinations {
+  @apply py-[0.875rem] mt-0;
+}
+
 .icon-order-type {
   @apply text-black mr-2;
 }

apps/page/checkout/src/lib/checkout-review/checkout-review.component.ts

@@ -14,7 +14,7 @@ import { Router } from '@angular/router';
 import { ApplicationService } from '@core/application';
 import { DomainAvailabilityService } from '@domain/availability';
 import { DomainCheckoutService } from '@domain/checkout';
-import { AvailabilityDTO, DestinationDTO, ShoppingCartItemDTO } from '@swagger/checkout';
+import { AvailabilityDTO, BranchDTO, DestinationDTO, ShoppingCartItemDTO } from '@swagger/checkout';
 import { UiMessageModalComponent, UiModalService } from '@ui/modal';
 import { PrintModalData, PrintModalComponent } from '@modal/printer';
 import { delay, first, map, switchMap, takeUntil, tap } from 'rxjs/operators';
@@ -254,6 +254,10 @@ export class CheckoutReviewComponent implements OnInit, OnDestroy, AfterViewInit
       });
   }
 
+  checkIfMultipleDestinationsForOrderTypeExist(targetBranch: BranchDTO, group: { items: ShoppingCartItemDTO[] }, i: number) {
+    return i === 0 ? false : targetBranch.id !== group.items[i - 1].destination?.data?.targetBranch?.data.id;
+  }
+
   async refreshAvailabilities() {
     this.checkingOla$.next(true);
 
@@ -288,15 +292,15 @@ export class CheckoutReviewComponent implements OnInit, OnDestroy, AfterViewInit
     this._store.notificationsControl = undefined;
   }
 
-  openDummyModal(data?: CheckoutDummyData) {
+  openDummyModal({ data, changeDataFromCart = false }: { data?: CheckoutDummyData; changeDataFromCart?: boolean }) {
     this.uiModal.open({
       content: CheckoutDummyComponent,
-      data,
+      data: { ...data, changeDataFromCart },
     });
   }
 
   changeDummyItem({ shoppingCartItem }: { shoppingCartItem: ShoppingCartItemDTO }) {
-    this.openDummyModal(shoppingCartItem);
+    this.openDummyModal({ data: shoppingCartItem, changeDataFromCart: true });
   }
 
   async changeItem({ shoppingCartItem }: { shoppingCartItem: ShoppingCartItemDTO }) {

apps/page/checkout/src/lib/checkout-review/details/checkout-review-details.component.html

@@ -5,14 +5,10 @@
 <ng-container *ngIf="buyer$ | async; let buyer">
   <div *ngIf="!(showAddresses$ | async)" class="flex flex-row items-start justify-between p-5">
     <div class="flex flex-row flex-wrap pr-4">
-      <ng-container *ngIf="!!buyer?.lastName && !!buyer?.firstName; else organisation">
-        <div class="mr-3">Nachname, Vorname</div>
-        <div class="font-bold">{{ buyer?.lastName }}, {{ buyer?.firstName }}</div>
+      <ng-container *ngIf="getNameFromBuyer(buyer); let name">
+        <div class="mr-3">{{ name.label }}</div>
+        <div class="font-bold">{{ name.value }}</div>
       </ng-container>
-      <ng-template #organisation>
-        <div class="mr-3">Firmenname</div>
-        <div class="font-bold">{{ buyer?.organisation?.name }}</div>
-      </ng-template>
     </div>
 
     <button (click)="changeAddress()" class="text-p1 font-bold text-[#F70400]">
@@ -36,9 +32,9 @@
 
 <ng-container *ngIf="payer$ | async; let payer">
   <div *ngIf="showAddresses$ | async" class="flex flex-row items-start justify-between p-5 pt-0">
-    <div class="flex flex-row flex-wrap pr-4" data-address-type="Rechnungsadresse">
-      <div class="mr-3">Rechnungsadresse</div>
-      <div class="font-bold">
+    <div class="flex flex-row flex-wrap pr-4" data-address-type="Rechnungsadresse" data-which="Rechnungsadresse">
+      <div class="mr-3" data-what="title">Rechnungsadresse</div>
+      <div class="font-bold" data-what="address">
         {{ payer | payerAddress }}
       </div>
     </div>
@@ -51,9 +47,9 @@
 
 <ng-container *ngIf="payer$ | async; let payer">
   <div *ngIf="showAddresses$ | async" class="flex flex-row items-start justify-between px-5">
-    <div class="flex flex-row flex-wrap pr-4" data-address-type="Lieferadresse">
-      <div class="mr-3">Lieferadresse</div>
-      <div class="font-bold">
+    <div class="flex flex-row flex-wrap pr-4" data-address-type="Lieferadresse" data-which="Lieferadresse">
+      <div class="mr-3" data-what="title">Lieferadresse</div>
+      <div class="font-bold" data-what="address">
         {{ shippingAddress$ | async | shippingAddress }}
       </div>
     </div>

apps/page/checkout/src/lib/checkout-review/details/checkout-review-details.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnInit, inject } from '@angular/core';
 import { emailNotificationValidator, mobileNotificationValidator } from '@shared/components/notification-channel-control';
 import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 import { combineLatest } from 'rxjs';
@@ -7,7 +7,8 @@ import { first, map, switchMap, takeUntil, withLatestFrom } from 'rxjs/operators
 import { ApplicationService } from '@core/application';
 import { DomainCheckoutService } from '@domain/checkout';
 import { Router } from '@angular/router';
-import { NotificationChannel } from '@swagger/checkout';
+import { BuyerDTO, NotificationChannel } from '@swagger/checkout';
+import { CustomerSearchNavigation } from '@shared/services';
 
 @Component({
   selector: 'page-checkout-review-details',
@@ -16,27 +17,15 @@ import { NotificationChannel } from '@swagger/checkout';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CheckoutReviewDetailsComponent implements OnInit {
-  control = this._store.notificationsControl;
+  customerNavigation = inject(CustomerSearchNavigation);
+
+  control: UntypedFormGroup;
 
   customerFeatures$ = this._store.customerFeatures$;
 
   payer$ = this._store.payer$;
   buyer$ = this._store.buyer$;
 
-  showAddresses$ = this._store.shoppingCartItems$.pipe(
-    takeUntil(this._store.orderCompleted),
-    withLatestFrom(this.customerFeatures$),
-    map(
-      ([items, customerFeatures]) =>
-        items.some(
-          (item) =>
-            item.features?.orderType === 'Versand' ||
-            item.features?.orderType === 'B2B-Versand' ||
-            item.features?.orderType === 'DIG-Versand'
-        ) || !!customerFeatures?.b2b
-    )
-  );
-
   showNotificationChannels$ = combineLatest([this._store.shoppingCartItems$, this.payer$, this.buyer$]).pipe(
     takeUntil(this._store.orderCompleted),
     map(
@@ -65,6 +54,22 @@ export class CheckoutReviewDetailsComponent implements OnInit {
     switchMap((processId) => this._domainCheckoutService.getShippingAddress({ processId }))
   );
 
+  showAddresses$ = this._store.shoppingCartItems$.pipe(
+    takeUntil(this._store.orderCompleted),
+    withLatestFrom(this.customerFeatures$, this.payer$, this.shippingAddress$),
+    map(([items, customerFeatures, payer, shippingAddress]) => {
+      const hasShippingOrBillingAddresses = !!payer?.address || !!shippingAddress;
+      const hasShippingFeature = items.some(
+        (item) =>
+          item.features?.orderType === 'Versand' || item.features?.orderType === 'B2B-Versand' || item.features?.orderType === 'DIG-Versand'
+      );
+
+      const isB2bCustomer = !!customerFeatures?.b2b;
+
+      return hasShippingOrBillingAddresses && (hasShippingFeature || isB2bCustomer);
+    })
+  );
+
   notificationChannelLoading$ = this._store.notificationChannelLoading$;
 
   constructor(
@@ -96,15 +101,18 @@ export class CheckoutReviewDetailsComponent implements OnInit {
       selectedNotificationChannel = 1;
     }
 
-    this.control = fb.group({
-      notificationChannel: new UntypedFormGroup({
-        selected: new UntypedFormControl(selectedNotificationChannel),
-        email: new UntypedFormControl(communicationDetails ? communicationDetails.email : '', emailNotificationValidator),
-        mobile: new UntypedFormControl(communicationDetails ? communicationDetails.mobile : '', mobileNotificationValidator),
-      }),
-    });
-
-    this._store.notificationsControl = this.control;
+    if (!this._store.notificationsControl) {
+      this.control = fb.group({
+        notificationChannel: new UntypedFormGroup({
+          selected: new UntypedFormControl(selectedNotificationChannel),
+          email: new UntypedFormControl(communicationDetails ? communicationDetails.email : '', emailNotificationValidator),
+          mobile: new UntypedFormControl(communicationDetails ? communicationDetails.mobile : '', mobileNotificationValidator),
+        }),
+      });
+      this._store.notificationsControl = this.control;
+    } else {
+      this.control = this._store.notificationsControl;
+    }
   }
 
   setAgentComment(agentComment: string) {
@@ -115,6 +123,20 @@ export class CheckoutReviewDetailsComponent implements OnInit {
     this._store.onNotificationChange(notificationChannels);
   }
 
+  getNameFromBuyer(buyer: BuyerDTO): { value: string; label: string } {
+    if (buyer?.lastName && buyer?.firstName) {
+      return { value: `${buyer?.lastName}, ${buyer?.firstName}`, label: 'Nachname, Vorname' };
+    } else if (buyer?.lastName) {
+      return { value: buyer?.lastName, label: 'Nachname, Vorname' };
+    } else if (buyer?.firstName) {
+      return { value: buyer?.firstName, label: 'Nachname, Vorname' };
+    } else if (buyer?.organisation?.name) {
+      return { value: buyer?.organisation?.name, label: 'Firmenname' };
+    } else {
+      return;
+    }
+  }
+
   async changeAddress() {
     const processId = this._application.activatedProcessId;
     const customer = await this._domainCheckoutService.getBuyer({ processId }).pipe(first()).toPromise();
@@ -123,7 +145,8 @@ export class CheckoutReviewDetailsComponent implements OnInit {
       return;
     }
     const customerId = customer.source;
-    this._router.navigate(['/kunde', this._application.activatedProcessId, 'customer', 'search', `${customerId}`]);
+    await this.customerNavigation.navigateToDetails({ processId, customerId, customer: { customerNumber: customer.buyerNumber } });
+    // this._router.navigate(['/kunde', this._application.activatedProcessId, 'customer', 'search', `${customerId}`]);
   }
 
   async navigateToCustomerSearch(processId: number) {

apps/page/checkout/src/lib/checkout-review/shopping-cart-item/shopping-cart-item.component.scss

@@ -17,7 +17,7 @@ button {
   grid-area: item-thumbnail;
   @apply mr-8 w-[3.75rem] h-[5.9375rem];
   img {
-    @apply w-[3.75rem] h-[5.9375rem] rounded shadow-cta;
+    @apply w-[3.75rem] max-h-[5.9375rem] rounded shadow-cta;
   }
 }
 

apps/page/checkout/src/lib/checkout-review/special-comment/special-comment.component.html

@@ -19,17 +19,14 @@
       placeholder="Eine Anmerkung hinzufügen"
       [(ngModel)]="value"
       [rows]="rows"
-      (ngModelChange)="check()"
-      (blur)="save()"
+      (ngModelChange)="updateValue()"
+      (blur)="updateValue()"
     ></textarea>
 
     <div class="comment-actions py-4">
       <button type="reset" class="clear pl-4" *ngIf="!disabled && !!value" (click)="clear(); triggerResize()">
         <shared-icon icon="close" [size]="24"></shared-icon>
       </button>
-      <button class="cta-save ml-4" type="submit" *ngIf="!disabled && isDirty" (click)="save()">
-        Speichern
-      </button>
     </div>
   </div>
 

apps/page/checkout/src/lib/checkout-review/special-comment/special-comment.component.ts

@@ -61,7 +61,7 @@ export class SpecialCommentComponent implements ControlValueAccessor {
 
   clear() {
     this.value = '';
-    this.save();
+    this.updateValue();
   }
 
   check() {
@@ -80,11 +80,12 @@ export class SpecialCommentComponent implements ControlValueAccessor {
     this.cdr.markForCheck();
   }
 
-  save() {
+  updateValue() {
     this.initialValue = this.value;
     this.onChange(this.value);
     this.check();
   }
+
   setIsDirty(isDirty: boolean) {
     this.isDirty = isDirty;
     this.isDirtyChange.emit(isDirty);

apps/page/checkout/src/lib/checkout-summary/checkout-summary.component.html

@@ -55,6 +55,8 @@
               <span class="w-32">Vorgangs-ID</span>
               <ng-container *ngIf="customer$ | async; let customer">
                 <a
+                  data-which="Vorgangs-ID"
+                  data-what="link"
                   *ngIf="customer$ | async; let customer"
                   class="font-bold text-[#0556B4] no-underline"
                   [routerLink]="['/kunde', processId, 'customer', 'search', customer?.id, 'orders', displayOrder.id]"
@@ -102,7 +104,7 @@
           >
             <div class="page-checkout-summary__items-thumbnail flex flex-row">
               <a [routerLink]="getProductSearchDetailsPath(order?.product?.ean)" [queryParams]="getProductSearchDetailsQueryParams(order)">
-                <img class="w-[3.125rem] h-20 mr-2" [src]="order.product?.ean | productImage: 195:315:true" />
+                <img class="w-[3.125rem] max-h-20 mr-2" [src]="order.product?.ean | productImage: 195:315:true" />
               </a>
             </div>
 
@@ -222,22 +224,25 @@
   <div class="fetching" *ngIf="!!(updatingPreferredPickUpDate$ | async)[(order?.subsetItems)[0].id]"></div>
 </ng-template>
 
-<div class="absolute left-1/2 bottom-10 transform -translate-x-1/2 inline-grid grid-flow-col gap-4">
-  <button
-    *ifRole="'Store'"
-    type="button"
-    class="px-6 py-2 rounded-full border-2 border-solid border-brand text-brand bg-white font-bold text-lg whitespace-nowrap h-14"
-    (click)="printOrderConfirmation()"
-  >
-    Bestellbestätigung drucken
-  </button>
+<div class="relative">
+  <div class="absolute left-1/2 bottom-10 inline-grid grid-flow-col gap-4 justify-center transform -translate-x-1/2">
+    <button
+      *ifRole="'Store'"
+      [disabled]="isPrinting$ | async"
+      type="button"
+      class="px-6 py-2 rounded-full border-2 border-solid border-brand text-brand bg-white font-bold text-lg whitespace-nowrap h-14 flex flex-row items-center justify-center print-button"
+      (click)="printOrderConfirmation()"
+    >
+      <ui-spinner class="min-h-4 min-w-4" [show]="isPrinting$ | async"> Bestellbestätigung drucken </ui-spinner>
+    </button>
 
-  <button
-    *ngIf="hasAbholung$ | async"
-    type="button"
-    class="px-6 py-2 rounded-full border-2 border-solid border-brand text-brand bg-white font-bold text-lg whitespace-nowrap h-14"
-    (click)="sendOrderConfirmation()"
-  >
-    Bestellbestätigung senden
-  </button>
+    <button
+      *ngIf="hasAbholung$ | async"
+      type="button"
+      class="px-6 py-2 rounded-full border-2 border-solid border-brand text-brand bg-white font-bold text-lg whitespace-nowrap h-14"
+      (click)="sendOrderConfirmation()"
+    >
+      Bestellbestätigung senden
+    </button>
+  </div>
 </div>

apps/page/checkout/src/lib/checkout-summary/checkout-summary.component.scss

@@ -96,6 +96,12 @@ hr {
   }
 }
 
+.print-button {
+  &:disabled {
+    @apply bg-inactive-branch border-solid border-inactive-branch text-white cursor-not-allowed;
+  }
+}
+
 .last {
   @apply pb-5;
 }

apps/page/checkout/src/lib/checkout-summary/checkout-summary.component.ts

@@ -16,7 +16,6 @@ import { DateAdapter } from '@ui/common';
 import { CheckoutNavigationService, PickUpShelfOutNavigationService, ProductCatalogNavigationService } from '@shared/services';
 import { EnvironmentService } from '@core/environment';
 import { SendOrderConfirmationModalService } from '@shared/modals/send-order-confirmation-modal';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { ToasterService } from '@shared/shell';
 
 @Component({
@@ -34,7 +33,7 @@ export class CheckoutSummaryComponent implements OnInit, OnDestroy {
 
   private _toaster = inject(ToasterService);
 
-  private _onDestroy$ = new Subject();
+  private _onDestroy$ = new Subject<void>();
   processId = Date.now();
   selectedDate = this.dateAdapter.today();
   minDateDatepicker = this.dateAdapter.addCalendarDays(this.dateAdapter.today(), -1);
@@ -136,6 +135,8 @@ export class CheckoutSummaryComponent implements OnInit, OnDestroy {
     )
   );
 
+  isPrinting$ = new BehaviorSubject(false);
+
   totalPriceCurrency$ = this.displayOrders$.pipe(map((displayOrders) => displayOrders[0]?.items[0]?.price?.value?.currency));
 
   containsDeliveryOrder$ = this.displayOrders$.pipe(
@@ -161,6 +162,10 @@ export class CheckoutSummaryComponent implements OnInit, OnDestroy {
     return this._environmentService.matchDesktopLarge$;
   }
 
+  get isTablet() {
+    return this._environmentService.matchTablet();
+  }
+
   expanded: boolean[] = [];
 
   constructor(
@@ -291,22 +296,9 @@ export class CheckoutSummaryComponent implements OnInit, OnDestroy {
     if (takeNowOrders.length != 1) return;
 
     try {
-      for (const takeNowOrder of takeNowOrders) {
-        for (const orderItem of takeNowOrder.items.filter((item) => item.features?.orderType === 'Rücklage')) {
-          await this.omsService
-            .changeOrderStatus(takeNowOrder.id, orderItem.id, orderItem.subsetItems[0]?.id, {
-              processingStatus: 128,
-            })
-            .toPromise();
-        }
-      }
-
-      await this.router.navigate(
-        this._shelfOutNavigationService.detailRoute({
-          processId: Date.now(),
-          item: { orderId: takeNowOrders[0].id, orderNumber: takeNowOrders[0].orderNumber, processingStatus: 128 },
-        }).path
-      );
+      await this.router.navigate(this._shelfOutNavigationService.listRoute({ processId: Date.now() }).path, {
+        queryParams: { main_qs: takeNowOrders[0].orderNumber, filter_supplier_id: '16' },
+      });
     } catch (e) {
       console.error(e);
     }
@@ -319,27 +311,57 @@ export class CheckoutSummaryComponent implements OnInit, OnDestroy {
   }
 
   async printOrderConfirmation() {
+    this.isPrinting$.next(true);
     const orders = await this.displayOrders$.pipe(first()).toPromise();
-    await this.uiModal
-      .open({
-        content: PrintModalComponent,
-        data: {
-          printerType: 'Label',
-          print: async (printer) => {
-            try {
-              const result = await this.domainPrinterService.printOrder({ orderIds: orders.map((o) => o.id), printer }).toPromise();
-              this._toaster.open({ type: 'success', message: 'Bestellbestätigung wurde gedruckt' });
-              return result;
-            } catch (error) {
-              this._toaster.open({ type: 'danger', message: 'Fehler beim Drucken der Bestellbestätigung' });
-            }
+    const selectedPrinter = await this.domainPrinterService
+      .getAvailableLabelPrinters()
+      .pipe(
+        first(),
+        map((printers) => {
+          if (Array.isArray(printers)) return printers.find((printer) => printer.selected === true);
+        })
+      )
+      .toPromise();
+
+    console.log(selectedPrinter);
+    if (!selectedPrinter || this.isTablet) {
+      await this.uiModal
+        .open({
+          content: PrintModalComponent,
+          data: {
+            printerType: 'Label',
+            printImmediately: !this.isTablet,
+            print: async (printer) => {
+              try {
+                const result = await this.domainPrinterService.printOrder({ orderIds: orders.map((o) => o.id), printer }).toPromise();
+                this._toaster.open({ type: 'success', message: 'Bestellbestätigung wurde gedruckt' });
+                return result;
+              } catch (error) {
+                this._toaster.open({ type: 'danger', message: 'Fehler beim Drucken der Bestellbestätigung' });
+              } finally {
+                this.isPrinting$.next(false);
+              }
+            },
+          } as PrintModalData,
+          config: {
+            panelClass: [],
+            showScrollbarY: false,
           },
-        } as PrintModalData,
-        config: {
-          panelClass: [],
-          showScrollbarY: false,
-        },
-      })
-      .afterClosed$.toPromise();
+        })
+        .afterClosed$.toPromise();
+      this.isPrinting$.next(false);
+    } else {
+      try {
+        const result = await this.domainPrinterService
+          .printOrder({ orderIds: orders.map((o) => o.id), printer: selectedPrinter.key })
+          .toPromise();
+        this._toaster.open({ type: 'success', message: 'Bestellbestätigung wurde gedruckt' });
+        return result;
+      } catch (error) {
+        this._toaster.open({ type: 'danger', message: 'Fehler beim Drucken der Bestellbestätigung' });
+      } finally {
+        this.isPrinting$.next(false);
+      }
+    }
   }
 }

apps/page/checkout/src/lib/shared/key-navigation/key-navigation.directive.ts

@@ -1,58 +0,0 @@
-import { Directive, HostListener, Input, Output, EventEmitter, OnInit } from '@angular/core';
-import { BranchDTO } from '@swagger/checkout';
-import { PurchasingOptionsModalStore } from '../../modals/purchasing-options-modal/purchasing-options-modal.store';
-
-/* tslint:disable: directive-selector */
-@Directive({ selector: '[keyNavigation]' })
-export class KeyNavigationDirective implements OnInit {
-  @Input() element: any;
-  @Input('keyNavigation') data: BranchDTO[];
-  @Output() closeDropdown = new EventEmitter<void>();
-  @Output() preselectBranch = new EventEmitter<BranchDTO>();
-  selectedData: BranchDTO;
-  position = 0;
-  posMarker = 0;
-
-  @HostListener('window:keyup', ['$event'])
-  keyEvent(event: KeyboardEvent) {
-    if (event.key === 'ArrowUp') {
-      if (this.position > 0) {
-        this.position--;
-      }
-
-      if (this.position <= this.posMarker - 4) {
-        this.element.scrollTop -= 44;
-      }
-
-      this.selectedData = this.data[this.position];
-      this.preselectBranch.emit(this.selectedData);
-    }
-
-    if (event.key === 'ArrowDown') {
-      if (this.position < this.data.length - 1) {
-        this.position++;
-      }
-
-      if (this.position >= 4) {
-        this.posMarker = this.position;
-        this.element.scrollTop += 44;
-      }
-
-      this.selectedData = this.data[this.position];
-      this.preselectBranch.emit(this.selectedData);
-    }
-
-    if (event.key === 'Enter') {
-      this.purchasingOptionsModalStore.setBranch(this.selectedData);
-      this.position = 0;
-      this.closeDropdown.emit();
-    }
-  }
-
-  constructor(private purchasingOptionsModalStore: PurchasingOptionsModalStore) {}
-
-  ngOnInit() {
-    this.selectedData = this.data[this.position];
-    this.preselectBranch.emit(this.selectedData);
-  }
-}

apps/page/checkout/src/lib/shared/key-navigation/key-navigation.module.ts

@@ -1,12 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-
-import { KeyNavigationDirective } from './key-navigation.directive';
-
-@NgModule({
-  imports: [CommonModule],
-  exports: [KeyNavigationDirective],
-  declarations: [KeyNavigationDirective],
-  providers: [],
-})
-export class KeyNavigationModule {}

apps/page/customer-order/src/lib/customer-order-details/customer-order-details-item/customer-order-details-item.component.html

@@ -87,7 +87,7 @@
         <div class="label">ISBN/EAN</div>
         <div class="value">{{ orderItem.product?.ean }}</div>
       </div>
-      <div class="detail" *ngIf="!!orderItem.price">
+      <div class="detail" *ngIf="orderItem.price !== undefined">
         <div class="label">Preis</div>
         <div class="value">{{ orderItem.price | currency: 'EUR' }}</div>
       </div>
@@ -140,6 +140,19 @@
           </ng-container>
         </ng-template>
       </div>
+      <div class="page-customer-order-details-item__tracking-details" *ngIf="getOrderItemTrackingData(orderItem); let trackingData">
+        <div class="label">{{ trackingData.length > 1 ? 'Sendungsnummern' : 'Sendungsnummer' }}</div>
+        <ng-container *ngFor="let tracking of trackingData">
+          <ng-container *ngIf="tracking.trackingProvider === 'DHL' && !isNative; else noTrackingLink">
+            <a class="value text-[#0556B4]" [href]="getTrackingNumberLink(tracking.trackingNumber)" target="_blank"
+              >{{ tracking.trackingProvider }}: {{ tracking.trackingNumber }}</a
+            >
+          </ng-container>
+          <ng-template #noTrackingLink>
+            <p class="value">{{ tracking.trackingProvider }}: {{ tracking.trackingNumber }}</p>
+          </ng-template>
+        </ng-container>
+      </div>
 
       <hr class="border-[#EDEFF0] border-t-2 my-4" />
 

apps/page/customer-order/src/lib/customer-order-details/customer-order-details-item/customer-order-details-item.component.scss

@@ -22,7 +22,7 @@ button {
 
 .page-customer-order-details-item__thumbnail {
   img {
-    @apply rounded shadow-cta w-[3.625rem] h-[5.9375rem];
+    @apply rounded shadow-cta w-[3.625rem] max-h-[5.9375rem];
   }
 }
 
@@ -55,6 +55,18 @@ button {
   }
 }
 
+.page-customer-order-details-item__tracking-details {
+  @apply flex gap-x-7;
+
+  .label {
+    @apply w-[8.125rem];
+  }
+
+  .value {
+    @apply flex flex-row items-center font-bold;
+  }
+}
+
 .page-customer-order-details-item__comment {
   textarea {
     @apply w-full flex-grow rounded bg-[#EDEFF0] border-[#AEB7C1] border border-solid outline-none text-p2 p-4;

apps/page/customer-order/src/lib/customer-order-details/customer-order-details-item/customer-order-details-item.component.ts

@@ -18,6 +18,7 @@ import { isEqual } from 'lodash';
 import { combineLatest, NEVER, Subject, Observable } from 'rxjs';
 import { catchError, filter, first, map, switchMap, withLatestFrom } from 'rxjs/operators';
 import { CustomerOrderDetailsStore } from '../customer-order-details.store';
+import { EnvironmentService } from '@core/environment';
 
 export interface CustomerOrderDetailsItemComponentState {
   orderItem?: OrderItemListItemDTO;
@@ -140,13 +141,18 @@ export class CustomerOrderDetailsItemComponent extends ComponentStore<CustomerOr
 
   more$ = this.select((s) => s.more);
 
-  private _onDestroy$ = new Subject();
+  private _onDestroy$ = new Subject<void>();
+
+  get isNative() {
+    return this._environment.isNative();
+  }
 
   constructor(
     private _store: CustomerOrderDetailsStore,
     private _domainReceiptService: DomainReceiptService,
     private _omsService: DomainOmsService,
-    private _cdr: ChangeDetectorRef
+    private _cdr: ChangeDetectorRef,
+    private _environment: EnvironmentService
   ) {
     super({
       more: false,
@@ -231,6 +237,35 @@ export class CustomerOrderDetailsItemComponent extends ComponentStore<CustomerOr
     return orderItems?.find((orderItem) => orderItem.data.id === orderItemListItem.orderItemId)?.data?.features?.orderType;
   }
 
+  getOrderItemTrackingData(orderItemListItem: OrderItemListItemDTO): Array<{ trackingProvider: string; trackingNumber: string }> {
+    const orderItems = this.order?.items;
+    const completeTrackingInformation = orderItems
+      ?.find((orderItem) => orderItem.data.id === orderItemListItem.orderItemId)
+      ?.data?.subsetItems?.find((subsetItem) => subsetItem.id === orderItemListItem.orderItemSubsetId)?.data?.trackingNumber;
+
+    if (!completeTrackingInformation) {
+      return;
+    }
+
+    // Beispielnummer: 'DHL: 124124' - Bei mehreren Tracking-Informationen muss noch ein Splitter eingebaut werden, je nach dem welcher Trenner verwendet wird
+    const trackingInformationPairs = completeTrackingInformation.split(':').map((obj) => obj.trim());
+    return this._trackingTransformationHelper(trackingInformationPairs);
+  }
+
+  // Macht aus einem String Array ein Array von Objekten mit den keys trackingProvider und trackingNumber
+  private _trackingTransformationHelper(trackingInformationPairs: string[]): Array<{ trackingProvider: string; trackingNumber: string }> {
+    return trackingInformationPairs.reduce((acc, current, index, array) => {
+      if (index % 2 === 0) {
+        acc.push({ trackingProvider: current, trackingNumber: array[index + 1] });
+      }
+      return acc;
+    }, [] as { trackingProvider: string; trackingNumber: string }[]);
+  }
+
+  getTrackingNumberLink(trackingNumber: string) {
+    return `https://www.dhl.de/de/privatkunden/dhl-sendungsverfolgung.html?piececode=${trackingNumber}`;
+  }
+
   triggerResize() {
     this.autosize.reset();
   }

apps/page/customer-order/src/lib/customer-order-details/customer-order-details.component.ts

@@ -345,7 +345,7 @@ export class CustomerOrderDetailsComponent implements OnInit, AfterViewInit, OnD
       if (action.command.includes('ARRIVED')) {
         navigateTo = await this.arrivedActionNavigation();
       }
-      if (action.command.includes('PRINT_PRICEDIFFQRCODELABEL')) {
+      if (action.command.includes('PRINT_PRICEDIFFQRCODELABEL') || action.command.includes('BACKTOSTOCK')) {
         navigateTo = 'main';
       }
 

apps/page/customer-order/src/lib/customer-order-search/customer-order-search-filter/customer-order-search-filter.component.ts

@@ -22,7 +22,7 @@ export class CustomerOrderSearchFilterComponent implements OnInit, OnDestroy {
 
   processId = Number(this._activatedRoute?.parent?.snapshot?.data?.processId);
 
-  private _onDestroy$ = new Subject();
+  private _onDestroy$ = new Subject<void>();
 
   @ViewChild(FilterComponent, { static: false })
   uiFilter: FilterComponent;
@@ -103,6 +103,33 @@ export class CustomerOrderSearchFilterComponent implements OnInit, OnDestroy {
       this._customerOrdersSearchStore.setQueryParams(queryParams);
     });
 
+    this._customerOrdersSearchStore.searchResultSubject.pipe(takeUntil(this._onDestroy$)).subscribe(async (result) => {
+      if (result.results.error) {
+      } else {
+        if (result.results.hits > 0) {
+          const queryParams = this._customerOrdersSearchStore.filter.getQueryParams();
+          if (result.results.hits === 1) {
+            const orderItem = result.results.result[0];
+            await this._navigationService
+              .getCustomerOrdersDetailsPath({
+                processId: this.processId,
+                processingStatus: orderItem?.processingStatus,
+                compartmentCode: orderItem?.compartmentCode ? encodeURIComponent(orderItem.compartmentCode) : undefined,
+                orderId: orderItem?.orderId ? orderItem.orderId : undefined,
+                extras: { queryParams },
+              })
+              .navigate();
+          } else {
+            await this._navigationService.getCustomerOrdersResultsPath(this.processId, { queryParams }).navigate();
+          }
+        } else {
+          this._customerOrdersSearchStore.setMessage('keine Suchergebnisse');
+        }
+
+        this._cdr.markForCheck();
+      }
+    });
+
     this._initSettings();
     this._initLoading$();
   }
@@ -133,34 +160,6 @@ export class CustomerOrderSearchFilterComponent implements OnInit, OnDestroy {
     const queryParams = filter.getQueryParams();
     this._customerOrdersSearchStore.setQueryParams(queryParams);
     await this.updateQueryParams(queryParams);
-
-    this._customerOrdersSearchStore.searchResultSubject.pipe(takeUntil(this._onDestroy$)).subscribe(async (result) => {
-      if (result.results.error) {
-      } else {
-        if (result.results.hits > 0) {
-          const queryParams = this._customerOrdersSearchStore.filter.getQueryParams();
-          if (result.results.hits === 1) {
-            const orderItem = result.results.result[0];
-            await this._navigationService
-              .getCustomerOrdersDetailsPath({
-                processId: this.processId,
-                processingStatus: orderItem?.processingStatus,
-                compartmentCode: orderItem?.compartmentCode ? encodeURIComponent(orderItem.compartmentCode) : undefined,
-                orderId: orderItem?.orderId ? orderItem.orderId : undefined,
-                extras: { queryParams },
-              })
-              .navigate();
-          } else {
-            await this._navigationService.getCustomerOrdersResultsPath(this.processId, { queryParams }).navigate();
-          }
-        } else {
-          this._customerOrdersSearchStore.setMessage('keine Suchergebnisse');
-        }
-
-        this._cdr.markForCheck();
-      }
-    });
-
     this._customerOrdersSearchStore.search({ clear: true });
   }
 

apps/page/customer-order/src/lib/customer-order-search/customer-order-search.component.ts

@@ -23,7 +23,7 @@ import { CustomerOrdersNavigationService } from '@shared/services';
   ],
 })
 export class CustomerOrderSearchComponent implements OnInit, OnDestroy {
-  private _onDestroy$ = new Subject();
+  private _onDestroy$ = new Subject<void>();
   private _processId$: Observable<number>;
 
   get isTablet() {

apps/page/customer-order/src/lib/customer-order-search/customer-order-search.module.ts

@@ -5,7 +5,6 @@ import { CustomerOrderSearchComponent } from './customer-order-search.component'
 import { CustomerOrderSearchFilterComponent, OrderBranchIdInputComponent } from './customer-order-search-filter';
 import { RouterModule } from '@angular/router';
 import { UiSpinnerModule } from '@ui/spinner';
-import { CustomerOrderSearchStore } from './customer-order-search.store';
 import { IconComponent, IconModule } from '@shared/components/icon';
 import { FilterModule } from '@shared/components/filter';
 import { CustomerOrderSearchMainModule } from './search-main';
@@ -22,7 +21,6 @@ import { CustomerOrderSearchMainModule } from './search-main';
     CustomerOrderSearchMainModule,
   ],
   exports: [CustomerOrderSearchComponent],
-  providers: [CustomerOrderSearchStore],
   declarations: [CustomerOrderSearchComponent, CustomerOrderSearchFilterComponent],
 })
 export class CustomerOrderSearchModule {}

apps/page/customer-order/src/lib/customer-order-search/customer-order-search.store.ts

@@ -7,7 +7,7 @@ import { Filter } from '@shared/components/filter';
 import { BranchDTO, ListResponseArgsOfOrderItemListItemDTO, OrderItemListItemDTO, QuerySettingsDTO } from '@swagger/oms';
 import { isResponseArgs } from '@utils/object';
 import { Observable, Subject } from 'rxjs';
-import { switchMap, tap, withLatestFrom } from 'rxjs/operators';
+import { switchMap, takeUntil, tap, withLatestFrom } from 'rxjs/operators';
 
 export interface CustomerOrderSearchState {
   defaultSettings?: QuerySettingsDTO;
@@ -125,6 +125,8 @@ export class CustomerOrderSearchStore extends ComponentStore<CustomerOrderSearch
 
   searchStarted = new Subject<{ clear?: boolean; silentReload?: boolean }>();
 
+  cancelSearch$ = new Subject<void>();
+
   constructor(private _domainGoodsInService: DomainCustomerOrderService, private _cache: CacheService) {
     super({
       fetching: false,
@@ -174,8 +176,7 @@ export class CustomerOrderSearchStore extends ComponentStore<CustomerOrderSearch
     this.setSearchHistory(searchHistory?.slice(0, 7));
   }
 
-  getCachedData() {
-    const queryToken = { ...this.filter?.getQueryToken(), processId: this.processId, branchId: String(this.selectedBranch?.id) } ?? {};
+  getCachedData({ queryToken }: { queryToken: Record<string, any> }) {
     return (
       this._cache.get<{
         hits: number;
@@ -185,10 +186,23 @@ export class CustomerOrderSearchStore extends ComponentStore<CustomerOrderSearch
     );
   }
 
+  setCache({ queryToken, hits, results }: { queryToken: Record<string, any>; hits: number; results: OrderItemListItemDTO[] }) {
+    this._cache.set(queryToken, {
+      hits,
+      results,
+      fetching: false,
+    });
+  }
+
+  cancelSearchRequest() {
+    this.cancelSearch$.next();
+    this.patchState({ fetching: false, silentFetching: false });
+  }
+
   search = this.effect((options$: Observable<{ clear?: boolean; siletReload?: boolean }>) =>
     options$.pipe(
-      tap((_) => {
-        this.searchStarted.next();
+      tap((opt) => {
+        this.searchStarted.next(opt);
         this.patchState({ message: undefined });
       }),
       withLatestFrom(this.results$, this.filter$, this.selectedBranch$),
@@ -201,7 +215,6 @@ export class CustomerOrderSearchStore extends ComponentStore<CustomerOrderSearch
 
         if (options?.clear) {
           this.searchResultClearedSubject.next();
-          this._cache.delete(filter?.getQueryToken());
         }
       }),
       switchMap(([options, results, filter, branch]) => {
@@ -227,11 +240,12 @@ export class CustomerOrderSearchStore extends ComponentStore<CustomerOrderSearch
           queryToken.take = 50;
         }
 
-        if (branch?.id) {
+        if (branch?.id && !!queryToken.filter) {
           queryToken.filter['branch_id'] = String(branch?.id);
         }
 
         return this._domainGoodsInService.search(queryToken).pipe(
+          takeUntil(this.cancelSearch$),
           tapResponse(
             (res) => {
               let _results: OrderItemListItemDTO[] = [];
@@ -250,18 +264,10 @@ export class CustomerOrderSearchStore extends ComponentStore<CustomerOrderSearch
                 silentFetching: false,
               });
 
-              const queryToken = { ...filter?.getQueryToken(), processId: this.processId, branchId: String(branch?.id) };
-
               if (res?.hits > 0 && options?.clear) {
                 this.saveSearchHistoryToSessionStorage();
               }
 
-              this._cache.set(queryToken, {
-                hits: res.hits,
-                results: _results,
-                fetching: false,
-              });
-
               this.searchResultSubject.next({ results: res, cached, clear: options?.clear });
 
               if (res?.hits === 0) {

apps/page/customer-order/src/lib/customer-order-search/search-main/customer-order-search-main.component.ts

@@ -17,10 +17,7 @@ import { ApplicationService } from '@core/application';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CustomerOrderSearchMainComponent implements OnInit, OnDestroy {
-  filter$ = this._customerOrderSearchStore.filter$.pipe(
-    filter((f) => !!f),
-    take(1)
-  );
+  filter$ = this._customerOrderSearchStore.filter$.pipe(filter((f) => !!f));
 
   loading$ = this._customerOrderSearchStore.fetching$;
 
@@ -62,15 +59,12 @@ export class CustomerOrderSearchMainComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit() {
-    // Clear scroll position
-    localStorage.removeItem(`SCROLL_POSITION_${this.processId}`);
-
     this._subscriptions.add(
       combineLatest([this.processId$, this._activatedRoute.queryParams])
         .pipe(debounceTime(50))
         .subscribe(([processId, queryParams]) => {
           this.removeBreadcrumbs(processId);
-          this.updateBreadcrumb(processId, queryParams);
+          this.updateBreadcrumb(queryParams);
         })
     );
 
@@ -88,17 +82,19 @@ export class CustomerOrderSearchMainComponent implements OnInit, OnDestroy {
         })
     );
 
-    // #4143 To make Splitscreen Search and Filter work combined
-    this._subscriptions.add(
-      this._customerOrderSearchStore.searchStarted.subscribe(async (_) => {
-        const queryParams = {
-          ...this.cleanupQueryParams(this._customerOrderSearchStore.filter.getQueryParams()),
-          main_qs: this.filterInputGroup?.uiInput?.value,
-        };
+    // Im Zuge des Tickets #4256 auskommentiert, da es zu Problemen geführt hat
+    // In der Filter Komponente wird dies schon gemacht
 
-        this._customerOrderSearchStore.setQueryParams(queryParams);
-      })
-    );
+    // // #4143 To make Splitscreen Search and Filter work combined
+    // this._subscriptions.add(
+    //   this._customerOrderSearchStore.searchStarted.subscribe(async (_) => {
+    //     const queryParams = {
+    //       ...this.cleanupQueryParams(this._customerOrderSearchStore.filter.getQueryParams()),
+    //       main_qs: this.filterInputGroup?.uiInput?.value,
+    //     };
+    //     this._customerOrderSearchStore.setQueryParams(queryParams);
+    //   })
+    // );
   }
 
   ngOnDestroy() {
@@ -147,15 +143,19 @@ export class CustomerOrderSearchMainComponent implements OnInit, OnDestroy {
   async search(filter: Filter) {
     this._customerOrderSearchStore.setMessage('');
     this.filterInputGroup?.cancelAutocomplete();
+
+    const queryParams = filter.getQueryParams();
+    this._customerOrderSearchStore.setQueryParams(queryParams);
+    await this.updateQueryParams(queryParams);
+
     this._customerOrderSearchStore.search({ clear: true });
-    await this.updateQueryParams(this.processId);
   }
 
-  async updateBreadcrumb(processId: number, params: Record<string, string>) {
+  async updateBreadcrumb(params: Record<string, string>) {
     await this._breadcrumb.addOrUpdateBreadcrumbIfNotExists({
-      key: processId,
+      key: this.processId,
       name: 'Kundenbestellung',
-      path: this._navigationService.getCustomerOrdersBasePath(processId).path,
+      path: this._navigationService.getCustomerOrdersBasePath(this.processId).path,
       tags: ['customer-order', 'main', 'filter'],
       section: 'customer',
       params,
@@ -164,12 +164,12 @@ export class CustomerOrderSearchMainComponent implements OnInit, OnDestroy {
 
   setQueryHistory(filter: Filter, query: string) {
     filter.fromQueryParams({ main_qs: query });
+    const queryParams = filter.getQueryParams();
+    this._customerOrderSearchStore.setQueryParams(queryParams);
   }
 
-  async updateQueryParams(processId: number) {
-    const queryParams = { ...this._customerOrderSearchStore.filter?.getQueryParams() };
-    queryParams.main_qs = queryParams.main_qs ?? '';
+  async updateQueryParams(queryParams: Record<string, string>) {
     await this._router.navigate([], { queryParams });
-    this.updateBreadcrumb(processId, queryParams);
+    await this.updateBreadcrumb(queryParams);
   }
 }

apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-item.component.html

@@ -12,7 +12,7 @@
   >
     <div class="page-customer-order-item__item-thumbnail text-center mr-4 w-[3.125rem] h-[4.9375rem]">
       <img
-        class="page-customer-order-item__item-image w-[3.125rem] h-[4.9375rem]"
+        class="page-customer-order-item__item-image w-[3.125rem] max-h-[4.9375rem]"
         loading="lazy"
         *ngIf="item?.product?.ean | productImage; let productImage"
         [src]="productImage"

apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-search-results.component.ts

@@ -8,10 +8,12 @@ import {
   ViewChildren,
   QueryList,
   AfterViewInit,
+  inject,
+  DestroyRef,
 } from '@angular/core';
-import { debounceTime, filter, first, map, shareReplay, switchMap, take, takeUntil, withLatestFrom } from 'rxjs/operators';
+import { debounceTime, filter, first, map, shareReplay, switchMap, takeUntil, withLatestFrom } from 'rxjs/operators';
 import { KeyValueDTOOfStringAndString, OrderItemListItemDTO } from '@swagger/oms';
-import { ActivatedRoute, Params } from '@angular/router';
+import { ActivatedRoute, NavigationStart, Router } from '@angular/router';
 import { CustomerOrderSearchStore } from '../customer-order-search.store';
 import { BehaviorSubject, combineLatest, Observable, Subject, Subscription } from 'rxjs';
 import { BreadcrumbService } from '@core/breadcrumb';
@@ -27,6 +29,8 @@ import { CustomerOrdersNavigationService } from '@shared/services';
 import { ApplicationService } from '@core/application';
 import { Filter, FilterInputGroupMainComponent } from '@shared/components/filter';
 import { CustomerOrderItemComponent } from './customer-order-item.component';
+import { CacheService } from '@core/cache';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 export interface CustomerOrderSearchResultsState {
   selectedOrderItemSubsetIds: number[];
@@ -46,6 +50,8 @@ export class CustomerOrderSearchResultsComponent extends ComponentStore<Customer
   @ViewChild(FilterInputGroupMainComponent, { static: false })
   sharedFilterInputGroupMain: FilterInputGroupMainComponent;
 
+  destroyRef = inject(DestroyRef);
+
   items$: Observable<OrderItemListItemDTO[]> = this._customerOrderSearchStore.results$;
 
   itemLength$ = this.items$.pipe(map((items) => items?.length));
@@ -93,16 +99,13 @@ export class CustomerOrderSearchResultsComponent extends ComponentStore<Customer
 
   processId$ = this._activatedRoute.parent.data.pipe(map((data) => +data.processId));
 
-  private _onDestroy$ = new Subject();
+  private _onDestroy$ = new Subject<void>();
 
   trackByFn: TrackByFunction<OrderItemListItemDTO> = (index, item) => `${item.orderId}${item.orderItemId}${item.orderItemSubsetId}`;
 
   private _searchResultSubscription = new Subscription();
 
-  filter$ = this._customerOrderSearchStore.filter$.pipe(
-    filter((f) => !!f),
-    take(1)
-  );
+  filter$ = this._customerOrderSearchStore.filter$.pipe(filter((f) => !!f));
 
   hasFilter$ = combineLatest([this.filter$, this._customerOrderSearchStore.defaultSettings$]).pipe(
     map(([filter, defaultFilter]) => !isEqual(filter?.getQueryParams(), Filter.create(defaultFilter).getQueryParams()))
@@ -133,6 +136,8 @@ export class CustomerOrderSearchResultsComponent extends ComponentStore<Customer
     return this._environment.matchTablet$.pipe(map((matches) => !matches && this._activatedRoute.outlet === 'primary'));
   }
 
+  private readonly SCROLL_POSITION_TOKEN = 'CUSTOMER_ORDERS_LIST_SCROLL_POSITION';
+
   constructor(
     private _customerOrderSearchStore: CustomerOrderSearchStore,
     private _activatedRoute: ActivatedRoute,
@@ -141,7 +146,9 @@ export class CustomerOrderSearchResultsComponent extends ComponentStore<Customer
     private _modal: UiModalService,
     private _environment: EnvironmentService,
     private _navigationService: CustomerOrdersNavigationService,
-    private _application: ApplicationService
+    private _application: ApplicationService,
+    private _cache: CacheService,
+    private _router: Router
   ) {
     super({
       selectedOrderItemSubsetIds: [],
@@ -163,10 +170,9 @@ export class CustomerOrderSearchResultsComponent extends ComponentStore<Customer
     );
 
     this._searchResultSubscription.add(
-      this.processId$
+      combineLatest([this.processId$, this._activatedRoute.queryParams])
         .pipe(
-          debounceTime(10),
-          withLatestFrom(this._activatedRoute.queryParams),
+          debounceTime(150),
           switchMap(([processId, params]) =>
             this._application.getSelectedBranch$(processId).pipe(map((selectedBranch) => ({ processId, params, selectedBranch })))
           )
@@ -174,52 +180,64 @@ export class CustomerOrderSearchResultsComponent extends ComponentStore<Customer
         .subscribe(async ({ processId, params, selectedBranch }) => {
           const branchChanged = selectedBranch?.id !== this._customerOrderSearchStore?.selectedBranch?.id;
 
+          const processChanged = processId !== this._customerOrderSearchStore.processId;
+
+          if (processChanged) {
+            if (!!this._customerOrderSearchStore.processId && this._customerOrderSearchStore.filter instanceof Filter) {
+              await this.updateBreadcrumb(processId, this._customerOrderSearchStore.filter?.getQueryParams());
+            }
+            this._customerOrderSearchStore.patchState({ processId });
+          }
+
           if (branchChanged) {
             this._customerOrderSearchStore.setBranch(selectedBranch);
           }
 
-          this._customerOrderSearchStore.setQueryParams(params);
-
           if (!(this._customerOrderSearchStore.filter instanceof UiFilter)) {
             await this._customerOrderSearchStore.loadDefaultSettings();
           }
 
-          if (this._customerOrderSearchStore.processId !== processId) {
-            this.scrollItemIntoView();
-            this.removeBreadcrumbs(processId);
+          const cleanQueryParams = this.cleanupQueryParams(params);
 
-            this._customerOrderSearchStore.patchState({ processId });
+          if (!isEqual(cleanQueryParams, this.cleanupQueryParams(this._customerOrderSearchStore.filter.getQueryParams()))) {
+            this._customerOrderSearchStore.setQueryParams(params);
 
-            const cache = this._customerOrderSearchStore.getCachedData();
+            const queryToken = {
+              ...this._customerOrderSearchStore.filter.getQueryParams(),
+              processId,
+              branchId: String(selectedBranch?.id),
+            };
+            const data = this._customerOrderSearchStore.getCachedData({ queryToken });
 
-            if (cache?.results?.length > 0) {
+            if (data?.results?.length > 0) {
               this._customerOrderSearchStore.patchState({
-                results: cache?.results,
-                hits: cache?.hits,
+                results: data?.results,
+                hits: data?.hits,
               });
-              await this.updateBreadcrumb(
-                this._customerOrderSearchStore.processId,
-                this._customerOrderSearchStore.filter?.getQueryParams()
-              );
-            } else if (this._customerOrderSearchStore?.results?.length === 0) {
-              this._customerOrderSearchStore.search({ siletReload: true });
+            }
+
+            if (
+              data.results?.length === 0 &&
+              this._activatedRoute?.parent?.children?.find((childRoute) => childRoute?.outlet === 'side')?.snapshot?.routeConfig?.path !==
+                'filter'
+            ) {
+              this.search({ clear: true });
             }
           } else if (branchChanged) {
-            this.search({ clear: true });
+            this._customerOrderSearchStore.search({ siletReload: true });
           }
 
-          if (this._customerOrderSearchStore.getCachedData()?.results?.length > 0 && !this.isDesktopLarge) {
-            const scrollPos = params?.scroll_position;
-            if (!!scrollPos) {
+          const scrollPos = this._getScrollPositionFromCache();
+          if (!!scrollPos && this._activatedRoute.outlet === 'primary') {
+            setTimeout(() => {
               this.scrollContainer?.scrollTo(scrollPos);
-            }
-            this.removeScrollPosition(params);
+            }, 150);
           }
 
           const process = await this._application.getProcessById$(processId).pipe(first()).toPromise();
           if (!!process) {
-            await this.updateBreadcrumb(processId, params);
             await this.createBreadcrumb(processId, params);
+            await this.updateBreadcrumb(processId, params);
           }
 
           if (this._activatedRoute?.outlet === 'primary') {
@@ -231,7 +249,7 @@ export class CustomerOrderSearchResultsComponent extends ComponentStore<Customer
     this._searchResultSubscription.add(
       this._customerOrderSearchStore.searchResultSubject.pipe(withLatestFrom(this.processId$)).subscribe(async ([result, processId]) => {
         const queryParams = this._customerOrderSearchStore.filter?.getQueryParams();
-        await this.createBreadcrumb(processId, queryParams);
+        this.createBreadcrumb(processId, queryParams);
 
         if (result.results.hits === 0) {
           return;
@@ -257,25 +275,56 @@ export class CustomerOrderSearchResultsComponent extends ComponentStore<Customer
     this._searchResultSubscription.add(
       this._customerOrderSearchStore.searchStarted.subscribe(async (_) => {
         const queryParams = {
-          ...this.cleanupQueryParams(this._customerOrderSearchStore.filter.getQueryParams()),
+          ...this.cleanupQueryParams(this._customerOrderSearchStore?.filter?.getQueryParams()),
           main_qs: this.sharedFilterInputGroupMain?.uiInput?.value,
         };
-
-        this._customerOrderSearchStore.setQueryParams(queryParams);
+        this._customerOrderSearchStore?.setQueryParams(queryParams);
       })
     );
+
+    this._router.events.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
+      if (event instanceof NavigationStart) {
+        this.cacheResults();
+        this._addScrollPositionToCache();
+      }
+    });
   }
 
   ngAfterViewInit(): void {
     this.scrollItemIntoView();
   }
 
+  private _removeScrollPositionFromCache(): void {
+    this._cache.delete({ processId: this._customerOrderSearchStore.processId, token: this.SCROLL_POSITION_TOKEN });
+  }
+
+  private _addScrollPositionToCache(): void {
+    if (this._activatedRoute.outlet === 'primary') {
+      this._cache.set<number>(
+        { processId: this._customerOrderSearchStore.processId, token: this.SCROLL_POSITION_TOKEN },
+        this.scrollContainer?.scrollPos
+      );
+    }
+  }
+
+  private _getScrollPositionFromCache(): number {
+    return this._cache.get<number>({ processId: this._customerOrderSearchStore.processId, token: this.SCROLL_POSITION_TOKEN });
+  }
+
+  // After Navigating to Result Side Outlet
+  scrollItemIntoView() {
+    setTimeout(() => {
+      const getPrimaryRouteParams = this._activatedRoute.parent?.children[0]?.snapshot?.params;
+      const item = this.listItems?.find((item) => item.item.orderId === Number(getPrimaryRouteParams?.orderId));
+      item?.scrollIntoView();
+    }, 150);
+  }
+
   async ngOnDestroy() {
     this._onDestroy$.next();
     this._onDestroy$.complete();
 
     this._searchResultSubscription.unsubscribe();
-
     await this.updateBreadcrumb(this._customerOrderSearchStore.processId, this._customerOrderSearchStore.filter?.getQueryParams());
   }
 
@@ -293,33 +342,6 @@ export class CustomerOrderSearchResultsComponent extends ComponentStore<Customer
     return clean;
   }
 
-  removeScrollPosition(queryParams: Params) {
-    const scroll_pos = queryParams?.scroll_position;
-    if (!!scroll_pos) {
-      const clean = { ...queryParams };
-      delete clean['scroll_position'];
-    }
-  }
-
-  async removeBreadcrumbs(processId: number) {
-    const editCrumbs = await this._breadcrumb.getBreadcrumbsByKeyAndTags$(processId, ['customer-order', 'edit']).pipe(first()).toPromise();
-
-    const historyCrumbs = await this._breadcrumb
-      .getBreadcrumbsByKeyAndTags$(processId, ['customer-order', 'history'])
-      .pipe(first())
-      .toPromise();
-
-    editCrumbs.forEach((crumb) => {
-      this._breadcrumb.removeBreadcrumb(crumb.id, true);
-    });
-
-    historyCrumbs.forEach((crumb) => {
-      this._breadcrumb.removeBreadcrumb(crumb.id, true);
-    });
-
-    await this.removeDetailsBreadcrumb(processId);
-  }
-
   async removeDetailsBreadcrumb(processId: number) {
     const detailsCrumbs = await this._breadcrumb
       .getBreadcrumbsByKeyAndTags$(processId, ['customer-order', 'details'])
@@ -331,7 +353,19 @@ export class CustomerOrderSearchResultsComponent extends ComponentStore<Customer
     });
   }
 
+  async createMainBreadcrumb(processId: number, params: Record<string, string>) {
+    await this._breadcrumb.addBreadcrumbIfNotExists({
+      key: processId,
+      name: 'Kundenbestellung',
+      path: this._navigationService.getCustomerOrdersBasePath(processId).path,
+      params,
+      tags: ['customer-order', 'main', 'filter'],
+      section: 'customer',
+    });
+  }
+
   async createBreadcrumb(processId: number, params: Record<string, string>) {
+    await this.createMainBreadcrumb(processId, params);
     await this._breadcrumb.addOrUpdateBreadcrumbIfNotExists({
       key: processId,
       name: this.getBreadcrumbName(params),
@@ -349,33 +383,37 @@ export class CustomerOrderSearchResultsComponent extends ComponentStore<Customer
         .pipe(first())
         .toPromise();
 
-      const scroll_position = this.scrollContainer?.scrollPos;
-
       const name = queryParams.main_qs ? queryParams.main_qs : 'Alle Artikel';
-      const params = { ...queryParams, scroll_position };
 
       for (const crumb of crumbs) {
         this._breadcrumb.patchBreadcrumb(crumb.id, {
           name,
-          params,
+          params: queryParams,
         });
       }
     }
   }
 
+  cacheResults() {
+    const queryToken = {
+      ...this._customerOrderSearchStore.filter?.getQueryParams(),
+      processId: this._customerOrderSearchStore.processId,
+      branchId: String(this._customerOrderSearchStore.selectedBranch?.id),
+    };
+
+    this._customerOrderSearchStore.setCache({
+      queryToken,
+      hits: this._customerOrderSearchStore.hits,
+      results: this._customerOrderSearchStore.results,
+    });
+  }
+
   getBreadcrumbName(params: Record<string, string>) {
     const input = params?.main_qs;
 
     return input?.replace('ORD:', '') ?? 'Alle';
   }
 
-  scrollItemIntoView() {
-    setTimeout(() => {
-      const item = this.listItems?.find((item) => item.item.orderId === Number(this._activatedRoute?.snapshot?.params?.orderId));
-      item?.scrollIntoView();
-    }, 150);
-  }
-
   async loadMore() {
     if (
       this._customerOrderSearchStore.hits > this._customerOrderSearchStore.results.length &&
@@ -389,8 +427,8 @@ export class CustomerOrderSearchResultsComponent extends ComponentStore<Customer
   search({ filter, clear = false }: { filter?: Filter; clear?: boolean }) {
     if (!!filter) {
       this.sharedFilterInputGroupMain.cancelAutocomplete();
+      this._customerOrderSearchStore.setQueryParams(filter?.getQueryParams());
     }
-
     this._customerOrderSearchStore.search({ clear });
   }
 

apps/page/customer-order/src/lib/customer-order.component.ts

@@ -3,18 +3,21 @@ import { ActivatedRoute } from '@angular/router';
 import { ApplicationService } from '@core/application';
 import { AuthService } from '@core/auth';
 import { EnvironmentService } from '@core/environment';
+import { provideComponentStore } from '@ngrx/component-store';
 import { BranchSelectorComponent } from '@shared/components/branch-selector';
 import { BreadcrumbComponent } from '@shared/components/breadcrumb';
 import { BranchDTO } from '@swagger/checkout';
 import { UiErrorModalComponent, UiModalService } from '@ui/modal';
 import { Observable, Subject, fromEvent } from 'rxjs';
 import { first, map, switchMap, takeUntil, withLatestFrom } from 'rxjs/operators';
+import { CustomerOrderSearchStore } from './customer-order-search';
 
 @Component({
   selector: 'page-customer-order',
   templateUrl: 'customer-order.component.html',
   styleUrls: ['customer-order.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [provideComponentStore(CustomerOrderSearchStore)],
 })
 export class CustomerOrderComponent implements OnInit {
   @ViewChild(BreadcrumbComponent, { read: ElementRef }) breadcrumbRef: ElementRef<HTMLElement>;
@@ -27,7 +30,7 @@ export class CustomerOrderComponent implements OnInit {
     return `${this.breadcrumbRef?.nativeElement?.clientWidth}px`;
   }
 
-  _onDestroy$ = new Subject<boolean>();
+  _onDestroy$ = new Subject<void>();
 
   get isTablet$() {
     return this._environmentService.matchTablet$;
@@ -39,13 +42,24 @@ export class CustomerOrderComponent implements OnInit {
     private _uiModal: UiModalService,
     private _renderer: Renderer2,
     private _environmentService: EnvironmentService,
-    public auth: AuthService
+    public auth: AuthService,
+    private _store: CustomerOrderSearchStore
   ) {}
 
   ngOnInit(): void {
     this.selectedBranch$ = this.application.activatedProcessId$.pipe(
       switchMap((processId) => this.application.getSelectedBranch$(Number(processId)))
     );
+
+    /* Ticket #4544 - Suchrequest abbrechen bei Prozesswechsel
+    / um zu verhindern, dass die Suche in einen anderen Kundenbestellungen Prozess übernommen wird 
+    / bei Prozesswechsel zwischen 2 Kundenbestellungen Prozessen
+    */
+    this.processId$.pipe(takeUntil(this._onDestroy$)).subscribe((processId) => {
+      if (Number(processId) !== this._store.processId) {
+        this._store.cancelSearchRequest();
+      }
+    });
   }
 
   ngAfterViewInit(): void {

apps/page/customer/src/lib/components/customer-type-selector/customer-type-selector.component.ts

@@ -197,7 +197,7 @@ export class CustomerTypeSelectorComponent extends ComponentStore<CustomerTypeSe
   setValue(value: { p4mUser?: boolean; customerType?: string } | string) {
     const initial = { p4mUser: this.p4mUser, customerType: this.customerType };
 
-    if (isString(value)) {
+    if (typeof value === 'string') {
       this.value = value;
     } else {
       if (isBoolean(value.p4mUser)) {

apps/page/customer/src/lib/components/form-blocks/deviating-address/deviating-address-form-block.component.html

@@ -38,7 +38,6 @@
       (onInit)="addAddressGroup($event)"
       (onDestroy)="removeAddressGroup()"
       [data]="data?.address"
-      [tabIndexStart]="nameFormBlock?.tabIndexEnd + 1"
       [requiredMarks]="addressRequiredMarks"
       [validatorFns]="addressValidatorFns"
       [readonly]="readonly"

apps/page/customer/src/lib/components/form-blocks/name/name-form-block.component.html

@@ -7,8 +7,7 @@
       [tabindex]="tabIndexStart"
       [autofocus]="focusAfterInit"
     >
-      <shared-select-option [value]="2">Herr</shared-select-option>
-      <shared-select-option [value]="4">Frau</shared-select-option>
+      <shared-select-option *ngFor="let gender of genderSettings.genders" [value]="gender.value">{{ gender.label }}</shared-select-option>
     </shared-select>
   </shared-form-control>
 

apps/page/customer/src/lib/components/form-blocks/name/name-form-block.component.ts

@@ -2,7 +2,7 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 import { FormBlockGroup } from '../form-block';
 import { NameFormBlockData } from './name-form-block-data';
-import { Gender } from '@swagger/crm';
+import { GenderSettingsService } from '@shared/services';
 
 @Component({
   selector: 'app-name-form-block',
@@ -15,18 +15,7 @@ export class NameFormBlockComponent extends FormBlockGroup<NameFormBlockData> {
     return this.tabIndexStart + 3;
   }
 
-  displayGenderNameFn = (gender: Gender) => {
-    if (gender == 2) {
-      return 'Herr';
-    }
-    if (gender == 4) {
-      return 'Frau';
-    }
-
-    return undefined;
-  };
-
-  constructor() {
+  constructor(public genderSettings: GenderSettingsService) {
     super();
   }
 

apps/page/customer/src/lib/constants.ts

@@ -1,6 +1,7 @@
 export const CustomerLabelColor = {
   Abholfachbestellung: '#EDEFF0',
   'Versandbestellung (oder gemischt)': '#EDEFF0',
+  'Bestellung ohne Konto': '#EDEFF0',
   Onlinekonto: '#804279',
   'Onlinekonto mit Kundenkarte': '#804279',
   'Business Konto (auf Rechnung)': '#804279',
@@ -10,6 +11,7 @@ export const CustomerLabelColor = {
 
 export const CustomerLabelTextColor = {
   Abholfachbestellung: '#000000',
+  'Bestellung ohne Konto': '#000000',
   'Versandbestellung (oder gemischt)': '#000000',
   Onlinekonto: '#FFFFFF',
   'Onlinekonto mit Kundenkarte': '#FFFFFF',

apps/page/customer/src/lib/create-customer/abstract-create-customer.ts

@@ -1,6 +1,6 @@
 import { HttpErrorResponse } from '@angular/common/http';
 import { ChangeDetectorRef, Directive, OnDestroy, OnInit, ViewChild, inject } from '@angular/core';
-import { AbstractControl, AsyncValidatorFn, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
+import { AbstractControl, AsyncValidatorFn, UntypedFormControl, UntypedFormGroup, ValidationErrors, ValidatorFn } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { BreadcrumbService } from '@core/breadcrumb';
 import { CrmCustomerService } from '@domain/crm';
@@ -24,7 +24,12 @@ import {
 } from 'rxjs/operators';
 import { AddressFormBlockComponent, DeviatingAddressFormBlockComponent, DeviatingAddressFormBlockData } from '../components/form-blocks';
 import { FormBlock } from '../components/form-blocks/form-block';
-import { CustomerCreateFormData, decodeFormData, encodeFormData } from './customer-create-form-data';
+import {
+  CustomerCreateFormData,
+  decodeFormData,
+  encodeFormData,
+  mapCustomerInfoDtoToCustomerCreateFormData,
+} from './customer-create-form-data';
 import { AddressSelectionModalService } from '../modals';
 import { CustomerCreateNavigation, CustomerSearchNavigation } from '@shared/services';
 
@@ -101,7 +106,8 @@ export abstract class AbstractCreateCustomer implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    this.updateBreadcrumb(this.latestProcessId, this.formData);
+    // Fix für #4676 - Breadcrumb wurde beim Schließen des Prozesses neu erstellt und nicht korrekt gelöscht
+    // this.updateBreadcrumb(this.latestProcessId, this.formData);
     this.onDestroy$.next();
     this.onDestroy$.complete();
     this.busy$.complete();
@@ -184,6 +190,47 @@ export abstract class AbstractCreateCustomer implements OnInit, OnDestroy {
     this.cdr.markForCheck();
   }
 
+  minBirthDateValidator = (): ValidatorFn => {
+    return (control: AbstractControl): ValidationErrors | null => {
+      const minAge = 18; // 18 years
+
+      if (!control.value) {
+        return null;
+      }
+
+      const controlBirthDate = new Date(control.value);
+      const minBirthDate = new Date();
+      minBirthDate.setFullYear(minBirthDate.getFullYear() - minAge);
+
+      // Check if customer is over 18 years old
+      if (this._checkIfAgeOver18(controlBirthDate, minBirthDate)) {
+        return null;
+      } else {
+        return { minBirthDate: `Teilnahme ab ${minAge} Jahren` };
+      }
+    };
+  };
+
+  private _checkIfAgeOver18(inputDate: Date, minBirthDate: Date): boolean {
+    // Check year
+    if (inputDate.getFullYear() < minBirthDate.getFullYear()) {
+      return true;
+    }
+    // Check Year + Month
+    else if (inputDate.getFullYear() === minBirthDate.getFullYear() && inputDate.getMonth() < minBirthDate.getMonth()) {
+      return true;
+    }
+    // Check Year + Month + Day
+    else if (
+      inputDate.getFullYear() === minBirthDate.getFullYear() &&
+      inputDate.getMonth() === minBirthDate.getMonth() &&
+      inputDate.getDate() <= minBirthDate.getDate()
+    ) {
+      return true;
+    }
+    return false;
+  }
+
   emailExistsValidator: AsyncValidatorFn = (control) => {
     return of(control.value).pipe(
       tap((_) => this.customerExists$.next(false)),
@@ -224,7 +271,33 @@ export abstract class AbstractCreateCustomer implements OnInit, OnDestroy {
         const customerId = this.formData?._meta?.customerDto?.id ?? this.formData?._meta?.customerInfoDto?.id;
         return this.customerService.checkLoyaltyCard({ loyaltyCardNumber: value, customerId }).pipe(
           map((response) => {
-            return !response?.error && (response as any)?.result === 1 ? null : { invalid: 'Kundenkartencode ist ungültig' };
+            if (response.error) {
+              throw response.message;
+            }
+
+            /**
+             * #4485 Kubi // Verhalten mit angelegte aber nicht verknüpfte Kundenkartencode in Kundensuche und Kundendaten erfassen ist nicht gleich
+             * Fall1: Kundenkarte hat Daten in point4more:
+             * Sobald Kundenkartencode in Feld "Kundenkartencode" reingegeben wird- werden die Daten von point4more in Formular "Kundendaten Erfassen" eingefügt und ersetzen (im Ganzen, nicht inkremental) die Daten in Felder, falls welche schon reingetippt werden.
+             * Fall2: Kundenkarte hat keine Daten in point4more:
+             * Sobald Kundenkartencode in Feld "Kundenkartencode" reingegeben wird- bleiben die Daten in Formular "Kundendaten Erfassen" in Felder, falls welche schon reingetippt werden.
+             */
+            if (response.result && response.result.customer) {
+              const customer = response.result.customer;
+              const data = mapCustomerInfoDtoToCustomerCreateFormData(customer);
+
+              if (data.name.firstName && data.name.lastName) {
+                // Fall1
+                this._formData.next(data);
+              } else {
+                // Fall2 Hier müssen die Metadaten gesetzt werden um eine verknüfung zur kundenkarte zu ermöglichen.
+                const current = this.formData;
+                current._meta = data._meta;
+                current.p4m = data.p4m;
+              }
+            }
+
+            return null;
           }),
           catchError((error) => {
             if (error instanceof HttpErrorResponse) {
@@ -346,7 +419,7 @@ export abstract class AbstractCreateCustomer implements OnInit, OnDestroy {
         } catch (error) {
           this.form.enable();
           setTimeout(() => {
-            this.addressFormBlock.setAddressValidationError(error.error.invalidProperties);
+            this.deviatingDeliveryAddressFormBlock.setAddressValidationError(error.error.invalidProperties);
           }, 10);
 
           return;

apps/page/customer/src/lib/create-customer/create-b2b-customer/create-b2b-customer.component.ts

@@ -41,7 +41,7 @@ export class CreateB2BCustomerComponent extends AbstractCreateCustomer {
   deviatingNameRequiredMarks: (keyof NameFormBlockData)[] = ['gender', 'firstName', 'lastName'];
 
   deviatingNameValidationFns: Record<string, ValidatorFn[]> = {
-    gender: [Validators.required, Validators.min(1)],
+    gender: [Validators.required],
     firstName: [Validators.required],
     lastName: [Validators.required],
   };

apps/page/customer/src/lib/create-customer/create-guest-customer/create-guest-customer.component.ts

@@ -25,7 +25,7 @@ export class CreateGuestCustomerComponent extends AbstractCreateCustomer {
   nameValidationFns: Record<keyof NameFormBlockData, ValidatorFn[]> = {
     firstName: [Validators.required],
     lastName: [Validators.required],
-    gender: [Validators.required, Validators.min(1)],
+    gender: [Validators.required],
     title: [],
   };
 
@@ -44,7 +44,7 @@ export class CreateGuestCustomerComponent extends AbstractCreateCustomer {
   deviatingNameRequiredMarks: (keyof NameFormBlockData)[] = ['gender', 'firstName', 'lastName'];
 
   deviatingNameValidationFns: Record<string, ValidatorFn[]> = {
-    gender: [Validators.required, Validators.min(1)],
+    gender: [Validators.required],
     firstName: [Validators.required],
     lastName: [Validators.required],
   };

apps/page/customer/src/lib/create-customer/create-p4m-customer/create-p4m-customer.component.html

@@ -64,6 +64,12 @@
   >
   </app-name-form-block>
 
+  <p class="info" *ngIf="customerType === 'webshop-p4m'">
+    Wir werden Ihnen Werbung zu ähnlichen Produkten oder Dienstleistungen aus unserem Sortiment per E-Mail zusenden. Sie können der
+    Verwendung Ihrer Daten jederzeit z.B. mittels der in den E-Mails enthaltenen Abmeldelinks widersprechen, ohne dass hierfür andere als
+    die Übermittlungskosten nach den Basistarifen entstehen.
+  </p>
+
   <app-email-form-block
     class="flex-grow"
     #email

apps/page/customer/src/lib/create-customer/create-p4m-customer/create-p4m-customer.component.ts

@@ -36,7 +36,7 @@ export class CreateP4MCustomerComponent extends AbstractCreateCustomer implement
   nameValidationFns: Record<keyof NameFormBlockData, ValidatorFn[]> = {
     firstName: [Validators.required],
     lastName: [Validators.required],
-    gender: [Validators.required, Validators.min(1)],
+    gender: [Validators.required],
     title: [],
   };
 
@@ -70,9 +70,9 @@ export class CreateP4MCustomerComponent extends AbstractCreateCustomer implement
 
   agbValidatorFns = [Validators.requiredTrue];
 
-  birthDateValidatorFns = [Validators.required];
+  birthDateValidatorFns = [];
 
-  existingCustomer$: Observable<CustomerInfoDTO | null>;
+  existingCustomer$: Observable<CustomerInfoDTO | CustomerDTO | null>;
 
   ngOnInit(): void {
     super.ngOnInit();
@@ -138,6 +138,7 @@ export class CreateP4MCustomerComponent extends AbstractCreateCustomer implement
 
   initMarksAndValidators() {
     this.asyncLoyaltyCardValidatorFn = [this.checkLoyalityCardValidator];
+    this.birthDateValidatorFns = [Validators.required, this.minBirthDateValidator()];
     if (this._customerType === 'webshop') {
       this.emailRequiredMark = true;
       this.emailValidatorFn = [Validators.required, Validators.email, validateEmail];

apps/page/customer/src/lib/create-customer/create-store-customer/create-store-customer.component.ts

@@ -36,7 +36,7 @@ export class CreateStoreCustomerComponent extends AbstractCreateCustomer {
 
   nameValidationFns: Record<string, ValidatorFn[]> = {
     title: [],
-    gender: [Validators.required, Validators.min(1)],
+    gender: [Validators.required],
     firstName: [Validators.required],
     lastName: [Validators.required],
   };

apps/page/customer/src/lib/create-customer/create-webshop-customer/create-webshop-customer.component.ts

@@ -25,7 +25,7 @@ export class CreateWebshopCustomerComponent extends AbstractCreateCustomer {
   nameValidationFns: Record<keyof NameFormBlockData, ValidatorFn[]> = {
     firstName: [Validators.required],
     lastName: [Validators.required],
-    gender: [Validators.required, Validators.min(1)],
+    gender: [Validators.required],
     title: [],
   };
 
@@ -56,7 +56,7 @@ export class CreateWebshopCustomerComponent extends AbstractCreateCustomer {
   async saveCustomer(customer: CustomerDTO): Promise<CustomerDTO> {
     const { customerDto, customerInfoDto } = this.formData?._meta ?? {};
 
-    const isUpgrade = !!(customerDto || customerInfoDto);
+    const isUpgrade = !!(customerDto || customerInfoDto)?.id;
 
     if (isUpgrade) {
       if (customerDto) {

apps/page/customer/src/lib/create-customer/update-p4m-webshop-customer/update-p4m-webshop-customer.component.ts

@@ -22,14 +22,14 @@ export class UpdateP4MWebshopCustomerComponent extends AbstractCreateCustomer im
 
   agbValidatorFns = [Validators.requiredTrue];
 
-  birthDateValidatorFns = [Validators.required];
+  birthDateValidatorFns = [Validators.required, this.minBirthDateValidator()];
 
   nameRequiredMarks: (keyof NameFormBlockData)[] = ['gender', 'firstName', 'lastName'];
 
   nameValidationFns: Record<keyof NameFormBlockData, ValidatorFn[]> = {
     firstName: [Validators.required],
     lastName: [Validators.required],
-    gender: [Validators.required, Validators.min(1)],
+    gender: [Validators.required],
     title: [],
   };
 

apps/page/customer/src/lib/customer-search/add-billing-address-main-view/add-billing-address-main-view.component.html

@@ -13,8 +13,7 @@
 <form [formGroup]="formGroup" (ngSubmit)="save()">
   <shared-form-control label="Anrede">
     <shared-select formControlName="gender" placeholder="Anrede" tabindex="1" [autofocus]="true">
-      <shared-select-option [value]="2">Herr</shared-select-option>
-      <shared-select-option [value]="4">Frau</shared-select-option>
+      <shared-select-option *ngFor="let gender of genderSettings.genders" [value]="gender.value">{{ gender.label }}</shared-select-option>
     </shared-select>
   </shared-form-control>
 

apps/page/customer/src/lib/customer-search/add-billing-address-main-view/add-billing-address-main-view.component.ts

@@ -9,7 +9,7 @@ import { map } from 'rxjs/operators';
 import { AsyncPipe, NgForOf, NgIf } from '@angular/common';
 import { AddressSelectionModalService } from '@shared/modals/address-selection-modal';
 import { CustomerSearchStore } from '../store';
-import { CustomerSearchNavigation } from '@shared/services';
+import { CustomerSearchNavigation, GenderSettingsService } from '@shared/services';
 import { IconComponent } from '@shared/components/icon';
 import { combineLatest } from 'rxjs';
 import { RouterLink } from '@angular/router';
@@ -35,7 +35,7 @@ import { RouterLink } from '@angular/router';
 })
 export class AddBillingAddressMainViewComponent {
   formGroup = new FormGroup({
-    gender: new FormControl<Gender>(0, [Validators.required, Validators.min(1)]),
+    gender: new FormControl<Gender>(undefined, [Validators.required]),
     title: new FormControl<string>(undefined),
     firstName: new FormControl<string>(undefined, [Validators.required]),
     lastName: new FormControl<string>(undefined, [Validators.required]),
@@ -59,7 +59,8 @@ export class AddBillingAddressMainViewComponent {
     private _customerService: CrmCustomerService,
     private _addressSelection: AddressSelectionModalService,
     private _store: CustomerSearchStore,
-    private _navigation: CustomerSearchNavigation
+    private _navigation: CustomerSearchNavigation,
+    public genderSettings: GenderSettingsService
   ) {}
 
   async save() {

apps/page/customer/src/lib/customer-search/add-shipping-address-main-view/add-shipping-address-main-view.component.html

@@ -27,8 +27,7 @@
 
   <shared-form-control label="Anrede">
     <shared-select formControlName="gender" placeholder="Anrede" tabindex="4" [autofocus]="true">
-      <shared-select-option [value]="2">Herr</shared-select-option>
-      <shared-select-option [value]="4">Frau</shared-select-option>
+      <shared-select-option *ngFor="let gender of genderSettings.genders" [value]="gender.value">{{ gender.label }}</shared-select-option>
     </shared-select>
   </shared-form-control>
 

apps/page/customer/src/lib/customer-search/add-shipping-address-main-view/add-shipping-address-main-view.component.ts

@@ -9,7 +9,7 @@ import { map, takeUntil } from 'rxjs/operators';
 import { AsyncPipe, NgForOf, NgIf } from '@angular/common';
 import { AddressSelectionModalService } from '@shared/modals/address-selection-modal';
 import { CustomerSearchStore } from '../store';
-import { CustomerSearchNavigation } from '@shared/services';
+import { CustomerSearchNavigation, GenderSettingsService } from '@shared/services';
 import { Subject, combineLatest } from 'rxjs';
 import { RouterLink } from '@angular/router';
 import { IconComponent } from '@shared/components/icon';
@@ -41,7 +41,7 @@ export class AddShippingAddressMainViewComponent implements OnInit, OnDestroy {
   );
 
   formGroup = new FormGroup({
-    gender: new FormControl<Gender>(0, [Validators.required, Validators.min(1)]),
+    gender: new FormControl<Gender>(undefined, [Validators.required]),
     title: new FormControl<string>(undefined),
     firstName: new FormControl<string>(undefined, [Validators.required]),
     lastName: new FormControl<string>(undefined, [Validators.required]),
@@ -65,7 +65,8 @@ export class AddShippingAddressMainViewComponent implements OnInit, OnDestroy {
     private _customerService: CrmCustomerService,
     private _addressSelection: AddressSelectionModalService,
     private _store: CustomerSearchStore,
-    private _navigation: CustomerSearchNavigation
+    private _navigation: CustomerSearchNavigation,
+    public genderSettings: GenderSettingsService
   ) {}
 
   ngOnInit() {

apps/page/customer/src/lib/customer-search/details-main-view/details-main-view-billing-addresses/details-main-view-billing-addresses.component.html

@@ -51,7 +51,7 @@
       [checked]="(selectedPayer$ | async)?.payer.id === assignedPayer.payer.id"
       (change)="selectPayer(assignedPayer)"
     />
-    <div class="flex flex-row justify-between items-start grow">
+    <div class="ml-2 flex flex-row justify-between items-start grow">
       <span class="mr-4">
         {{ assignedPayer.payer.data | address }}
       </span>