#1407 Erster Zwischenstand für Styling und Anzeige der Daten in der Bestellübersicht

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

@@ -1,4 +1,4 @@
-<div class="card" *ngIf="orderData$ | async; let orderData">
+<div class="card">
   <div>
     <ui-icon class="check-icon" icon="check" size="36px"></ui-icon>
   </div>
@@ -9,34 +9,67 @@
     die Übersicht Ihrer Bestellung.
   </p>
 
-  <div class="row">
-    <div class="order-customer">
-      {{ orderData?.buyer | buyerName }}
+  <ng-container *ngFor="let displayOrder of displayOrders$ | async; let i = index">
+    <div class="row">
+      <div class="order-customer" *ngIf="i === 0">
+        {{ displayOrder?.buyer | buyerName }}
+      </div>
+      <div class="grow"></div>
+      <button class="cta-print">Drucken</button>
     </div>
-    <div class="grow"></div>
-    <button class="cta-print">Drucken</button>
-  </div>
 
-  <div class="row">
-    <div class="sub-row">
-      <span>Belegnummer</span>
-      <strong>{{ orderData.orderNumber }}</strong>
+    <div class="row">
+      <div class="sub-row">
+        <span class="label">Belegnummer</span>
+        <strong>{{ displayOrder.orderNumber }}</strong>
+      </div>
+      <div class="sub-row between">
+        <span>Zielfiliale</span>
+        <strong>{{ displayOrder.targetBranch.name }}</strong>
+      </div>
     </div>
-    <div class="sub-row between">
-      <span>Zielfiliale</span>
-      <strong>{{ orderData.targetBranch.name }}</strong>
+    <div class="row">
+      <div class="sub-row">
+        <span class="label">Bestelldatum</span>
+        <strong>{{ displayOrder.orderDate | date }}</strong>
+      </div>
+      <div class="sub-row between">
+        <span>Adresse</span>
+        <strong>{{ displayOrder.targetBranch | branchAddress }}</strong>
+      </div>
     </div>
-  </div>
-  <div class="row">
-    <div class="sub-row">
-      <span>Bestelldatum</span>
-      <strong>{{ orderData.orderDate | date }}</strong>
-    </div>
-    <div class="sub-row between">
-      <span>Adresse</span>
-      <strong>{{ orderData.targetBranch | branchAddress }}</strong>
-    </div>
-  </div>
 
-  <hr />
+    <hr class="top-line" />
+    <ng-container *ngFor="let order of displayOrder.items">
+      <div class="row between">
+        <img class="thumbnail" [src]="order.product.ean | productImage: 30:50:true" />
+
+        <span class="name">{{ order.product.name }}</span>
+
+        <img class="order-icon" [src]="'/assets/images/Icon_' + order?.product?.format + '.svg'" alt="book-icon" />
+        <span class="separator">|</span>
+        <span class="format">{{ order.product.format }}</span>
+        <span class="separator">|</span>
+        <span class="contributors">{{ order?.product?.contributors }}</span>
+        <span class="separator">|</span>
+        <span class="order-type">Rücklage</span>
+
+        <span class="quantity">{{ order.quantity }}x</span>
+        <span class="price">{{ order.price?.value?.value | currency: ' ' }} {{ order.price?.value?.currency }}</span>
+      </div>
+
+      <hr />
+    </ng-container>
+
+    <div class="footer">
+      <div class="overview">
+        <span class="promotion-points">{{ totalItemCount$ | async }} Artikel | {{ totalReadingPoints$ | async }} Lesepunkte</span>
+
+        <div class="price-wrapper">
+          <div class="total-price">Gesamtsumme {{ totalPrice$ | async | currency: ' ' }}</div>
+          <div class="price-info">ohne Versandkosten</div>
+        </div>
+      </div>
+    </div>
+  </ng-container>
 </div>

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

@@ -9,6 +9,7 @@
 
 .card {
   @apply bg-white rounded-card shadow-card;
+  height: calc(100vh - 45px);
 }
 
 .order-header {
@@ -19,6 +20,10 @@
   @apply text-center text-lg my-0 mb-2;
 }
 
+.order-details {
+  @apply mt-4;
+}
+
 .cta-print {
   @apply bg-transparent text-brand font-bold text-xl outline-none border-none;
 }
@@ -37,13 +42,82 @@
 
 .sub-row {
   @apply flex flex-row flex-grow items-center w-1/2;
+
+  .label {
+    @apply w-px-150;
+  }
+}
+
+.thumbnail {
+  @apply mr-2;
+  width: 30px;
+}
+
+.name {
+  @apply font-bold whitespace-nowrap overflow-ellipsis overflow-hidden mx-2;
+  width: 300px;
+}
+
+.order-icon {
+  @apply mr-2 w-px-15 text-ucla-blue;
+  height: 18px;
+  width: 35px;
+}
+
+.separator {
+  @apply mx-1;
+}
+
+.format {
+  @apply w-px-50;
+}
+
+.order-type {
+  @apply w-px-100 font-bold;
+}
+
+.contributors {
+  @apply whitespace-nowrap overflow-ellipsis overflow-hidden;
+}
+
+.quantity {
+  @apply w-px-30 text-right;
+}
+
+.price {
+  @apply w-px-100 font-bold text-right;
+}
+
+.price-info {
+  @apply text-right text-sm;
 }
 
 .between {
   @apply justify-between;
 }
 
+.footer {
+  @apply flex flex-col justify-center items-center h-px-100;
+
+  .overview {
+    @apply flex flex-row justify-between;
+    width: 95%;
+  }
+
+  .promotion-points {
+    @apply text-ucla-blue text-regular font-bold;
+  }
+
+  .total-price {
+    @apply font-bold text-cta-l;
+  }
+}
+
 hr {
   height: 2px;
   @apply bg-disabled-customer;
 }
+
+.top-line {
+  @apply mt-8;
+}

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

@@ -1,7 +1,6 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { ApplicationService } from '@core/application';
 import { DomainCheckoutService } from '@domain/checkout';
-import { map, switchMap } from 'rxjs/operators';
+import { map } from 'rxjs/operators';
 
 @Component({
   selector: 'page-checkout-summary',
@@ -12,10 +11,32 @@ import { map, switchMap } from 'rxjs/operators';
 export class CheckoutSummaryComponent {
   displayOrders$ = this.domainCheckoutService.getOrders();
 
-  orderData$ = this.displayOrders$.pipe(
-    map((orders) => {
-      return orders[0];
-    })
+  totalItemCount$ = this.displayOrders$.pipe(
+    map((displayOrders) =>
+      displayOrders.reduce(
+        (total, displayOrder) => total + displayOrder?.items?.reduce((subTotal, order) => subTotal + order?.quantity, 0),
+        0
+      )
+    )
+  );
+
+  totalReadingPoints$ = this.displayOrders$.pipe(
+    map((displayOrders) =>
+      displayOrders.reduce(
+        (total, displayOrder) => total + displayOrder?.items?.reduce((subTotal, order) => subTotal + order?.promotion?.points, 0),
+        0
+      )
+    )
+  );
+
+  totalPrice$ = this.displayOrders$.pipe(
+    map((displayOrders) =>
+      displayOrders.reduce(
+        (total, displayOrder) =>
+          total + displayOrder?.items?.reduce((subTotal, order) => subTotal + order?.price?.value?.value * order.quantity, 0),
+        0
+      )
+    )
   );
 
   constructor(private domainCheckoutService: DomainCheckoutService) {}

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

@@ -4,9 +4,10 @@ import { CommonModule } from '@angular/common';
 import { CheckoutSummaryComponent } from './checkout-summary.component';
 import { UiIconModule } from '@ui/icon';
 import { PageCheckoutPipeModule } from '../pipes/page-checkout-pipe.module';
+import { ProductImageModule } from 'apps/cdn/product-image/src/public-api';
 
 @NgModule({
-  imports: [CommonModule, UiIconModule, PageCheckoutPipeModule],
+  imports: [CommonModule, UiIconModule, PageCheckoutPipeModule, ProductImageModule],
   exports: [CheckoutSummaryComponent],
   declarations: [CheckoutSummaryComponent],
 })