Merged PR 1267: #3145 Checkout Summary Changes

#3145 Bugfix Artikellink hat keinen neuen Prozess eröffnet sondern einen bestehenden überschrieben,
Wenn neue Bestellung getätigt wird, wird die alte Bestellbestätigung removed

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

@@ -877,6 +877,10 @@ export class DomainCheckoutService {
     return this.store.select(DomainCheckoutSelectors.selectOrders);
   }
 
+  removeAllOrders() {
+    this.store.dispatch(DomainCheckoutActions.removeAllOrders());
+  }
+
   setSpecialComment({ processId, agentComment }: { processId: number; agentComment: string }) {
     this.store.dispatch(DomainCheckoutActions.setSpecialComment({ processId, agentComment }));
   }

apps/domain/checkout/src/lib/store/domain-checkout.actions.ts

@@ -52,6 +52,8 @@ export const removeProcess = createAction(`${prefix} Remove Process`, props<{ pr
 
 export const setOrders = createAction(`${prefix} Add Orders`, props<{ orders: DisplayOrderDTO[] }>());
 
+export const removeAllOrders = createAction(`${prefix} Remove All Orders`);
+
 export const setBuyer = createAction(`${prefix} Set Buyer`, props<{ processId: number; buyer: BuyerDTO }>());
 
 export const setPayer = createAction(`${prefix} Set Payer`, props<{ processId: number; payer: PayerDTO }>());

apps/domain/checkout/src/lib/store/domain-checkout.reducer.ts

@@ -72,7 +72,11 @@ const _domainCheckoutReducer = createReducer(
     return storeCheckoutAdapter.setOne(entity, s);
   }),
   on(DomainCheckoutActions.removeProcess, (s, { processId }) => storeCheckoutAdapter.removeOne(processId, s)),
-  on(DomainCheckoutActions.setOrders, (s, { orders }) => ({ ...s, orders })),
+  on(DomainCheckoutActions.setOrders, (s, { orders }) => ({ ...s, orders: [...s.orders, ...orders] })),
+  on(DomainCheckoutActions.removeAllOrders, (s) => ({
+    ...s,
+    orders: [],
+  })),
   on(DomainCheckoutActions.setOlaError, (s, { processId, olaErrorIds }) => {
     const entity = getOrCreateCheckoutEntity({ processId, entities: s.entities });
     entity.olaErrorIds = olaErrorIds;

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

@@ -749,10 +749,11 @@ export class CheckoutReviewComponent extends ComponentStore<CheckoutReviewCompon
     } else {
       try {
         this.showOrderButtonSpinner = true;
-        await this.domainCheckoutService.completeCheckout({ processId }).toPromise();
+        const orders = await this.domainCheckoutService.completeCheckout({ processId }).toPromise();
+        const orderIds = orders.map((order) => order.id).join(',');
         this._orderCompleted.next();
-        this.patchProcess();
-        await this.router.navigate(['/kunde', this.applicationService.activatedProcessId, 'cart', 'summary']);
+        await this.patchProcess(processId);
+        await this.router.navigate(['/kunde', processId, 'cart', 'summary', orderIds]);
       } catch (error) {
         const response = error?.error;
         let message: string = response?.message ?? '';
@@ -771,8 +772,8 @@ export class CheckoutReviewComponent extends ComponentStore<CheckoutReviewCompon
 
         if (error.status === 409) {
           this._orderCompleted.next();
-          this.patchProcess();
-          await this.router.navigate(['/kunde', this.applicationService.activatedProcessId, 'cart', 'summary']);
+          await this.patchProcess(processId);
+          await this.router.navigate(['/kunde', processId, 'cart', 'summary']);
         }
       } finally {
         this.showOrderButtonSpinner = false;
@@ -781,8 +782,8 @@ export class CheckoutReviewComponent extends ComponentStore<CheckoutReviewCompon
     }
   }
 
-  patchProcess() {
-    this.applicationService.patchProcess(this.applicationService.activatedProcessId, {
+  async patchProcess(processId: number) {
+    this.applicationService.patchProcess(processId, {
       type: 'cart-checkout',
     });
   }

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

@@ -63,7 +63,9 @@
       <div class="row between">
         <div class="product-name">
           <img class="thumbnail" [src]="order.product?.ean | productImage: 30:50:true" />
-          <a class="name" [routerLink]="['/kunde', 'product', 'details', 'ean', order?.product?.ean]">{{ order?.product?.name }}</a>
+          <a class="name" [routerLink]="['/kunde', processId, 'product', 'details', 'ean', order?.product?.ean]">{{
+            order?.product?.name
+          }}</a>
         </div>
 
         <div class="product-details">

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

@@ -1,17 +1,17 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { Component, ChangeDetectionStrategy, OnDestroy } from '@angular/core';
 import { DomainCheckoutService } from '@domain/checkout';
 import { UiModalService } from '@ui/modal';
 import { PrintModalComponent, PrintModalData } from '@modal/printer';
-import { first, map, switchMap } from 'rxjs/operators';
+import { debounceTime, first, map, shareReplay, switchMap } from 'rxjs/operators';
 import { CrmCustomerService } from '@domain/crm';
-import { Router } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { DomainOmsService } from '@domain/oms';
 import { DomainCatalogService } from '@domain/catalog';
-import { DisplayOrderItemDTO } from '@swagger/oms';
+import { DisplayOrderDTO, DisplayOrderItemDTO } from '@swagger/oms';
 import { BreadcrumbService } from '@core/breadcrumb';
 import { ApplicationService } from '@core/application';
 import { DomainPrinterService } from '@domain/printer';
-import { NEVER } from 'rxjs';
+import { combineLatest, NEVER } from 'rxjs';
 
 @Component({
   selector: 'page-checkout-summary',
@@ -19,18 +19,26 @@ import { NEVER } from 'rxjs';
   styleUrls: ['checkout-summary.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class CheckoutSummaryComponent {
+export class CheckoutSummaryComponent implements OnDestroy {
   processId = Date.now();
 
-  displayOrders$ = this.domainCheckoutService.getOrders().pipe(
-    map((orders) =>
-      orders.map((order) => {
+  displayOrders$ = combineLatest([this.domainCheckoutService.getOrders(), this._route.params]).pipe(
+    map(([orders, params]) => {
+      let filteredOrders: DisplayOrderDTO[] = [];
+      if (params?.orderIds) {
+        const orderIds: String[] = params.orderIds.split(',');
+        filteredOrders = orders.filter((order) => orderIds.find((id) => Number(id) === order.id));
+      } else {
+        return filteredOrders;
+      }
+      return filteredOrders?.map((order) => {
         return {
           ...order,
           items: [...order.items]?.sort((a, b) => a.product?.name.localeCompare(b.product?.name)),
         };
-      })
-    )
+      });
+    }),
+    shareReplay()
   );
 
   totalItemCount$ = this.displayOrders$.pipe(
@@ -102,6 +110,7 @@ export class CheckoutSummaryComponent {
     private customerService: CrmCustomerService,
     private domainCatalogService: DomainCatalogService,
     private router: Router,
+    private _route: ActivatedRoute,
     private omsService: DomainOmsService,
     private uiModal: UiModalService,
     private breadcrumb: BreadcrumbService,
@@ -118,13 +127,24 @@ export class CheckoutSummaryComponent {
         this.breadcrumb.addBreadcrumbIfNotExists({
           key: this.applicationService.activatedProcessId,
           name: 'Bestellbestätigung',
-          path: `/kunde/${this.applicationService.activatedProcessId}/cart/summary`,
+          path: `/kunde/${this.applicationService.activatedProcessId}/cart/summary/${this._route.snapshot.params.orderIds}`,
           tags: ['checkout', 'cart'],
           section: 'customer',
         });
       });
   }
 
+  async ngOnDestroy() {
+    const checkoutProcess = await this.applicationService
+      .getLastActivatedProcessWithSectionAndType$('customer', 'cart-checkout')
+      .pipe(first())
+      .toPromise();
+
+    if (!checkoutProcess) {
+      this.domainCheckoutService.removeAllOrders();
+    }
+  }
+
   openPrintModal(id: number) {
     this.uiModal.open({
       content: PrintModalComponent,

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

@@ -10,6 +10,7 @@ const routes: Routes = [
     component: PageCheckoutComponent,
     children: [
       { path: 'summary', component: CheckoutSummaryComponent },
+      { path: 'summary/:orderIds', component: CheckoutSummaryComponent },
       { path: 'review', component: CheckoutReviewComponent },
       { path: '', pathMatch: 'full', redirectTo: 'review' },
     ],