#1488 Bestellbestätigung Styling angepasst, Anzeige weiterer Daten

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

@@ -1,6 +1,8 @@
 <div class="card">
-  <div>
-    <ui-icon class="check-icon" icon="check" size="36px"></ui-icon>
+  <div class="check-icon-wrapper">
+    <span class="icon-circle">
+      <ui-icon class="check-icon" icon="check" size="36px"></ui-icon>
+    </span>
   </div>
 
   <h1 class="order-header">Bestellbestätigung</h1>
@@ -19,7 +21,7 @@
     </div>
 
     <div class="row">
-      <div class="sub-row">
+      <div class="sub-row small">
         <span class="label">Belegnummer</span>
         <strong>{{ displayOrder.orderNumber }}</strong>
       </div>
@@ -33,7 +35,7 @@
       </div>
     </div>
     <div class="row">
-      <div class="sub-row">
+      <div class="sub-row small">
         <span class="label">Bestelldatum</span>
         <strong>{{ displayOrder.orderDate | date }}</strong>
       </div>
@@ -43,12 +45,46 @@
       </div>
     </div>
 
+    <div class="row item-group-header">
+      <ui-icon
+        class="icon-order-type"
+        [size]="displayOrder.features?.orderType === 'B2B-Versand' ? '50px' : '25px'"
+        [icon]="
+          displayOrder.features?.orderType === 'Abholung'
+            ? 'box_out'
+            : displayOrder.features?.orderType === 'Versand'
+            ? 'truck'
+            : displayOrder.features?.orderType === 'Rücklage'
+            ? 'shopping_bag'
+            : displayOrder.features?.orderType === 'B2B-Versand'
+            ? 'truck_b2b'
+            : displayOrder.features?.orderType === 'Download'
+            ? 'download'
+            : 'truck'
+        "
+      ></ui-icon>
+      <div class="label">
+        {{ displayOrder.features?.orderType }}
+      </div>
+    </div>
+    <!-- <ng-container *ngIf="displayOrder.features?.orderType === 'Abholung'">
+      <hr />
+      <div class="row">
+        <div class="branch-label">
+          Filiale
+        </div>
+        <div class="branch-name">{{ displayOrder.targetBranch?.name }} | {{ displayOrder.targetBranch | branchAddress }}</div>
+      </div>
+    </ng-container> -->
+
     <hr class="top-line" />
     <ng-container *ngFor="let order of displayOrder.items">
       <div class="row between">
         <div class="product-name">
           <img class="thumbnail" [src]="order.product?.ean | productImage: 30:50:true" />
-          <span class="name">{{ order.product?.name }}</span>
+          <a class="name" [queryParams]="{ type: 'ean' }" [routerLink]="['/product', 'details', order?.product?.ean]">{{
+            order?.product?.name
+          }}</a>
         </div>
 
         <div class="product-details">
@@ -58,28 +94,38 @@
             <span class="separator">|</span>
             <span class="contributors">{{ order?.product?.contributors }}</span>
           </div>
-          <div class="delivery-row">
-            <!-- <span class="separator">|</span> -->
-            <span class="order-type">{{ order?.features?.orderType || '' }} </span>
+          <div class="delivery-row" *ngIf="order?.features?.orderType">
+            <ng-container *ngIf="order?.features?.orderType === 'Abholung'">
+              <span class="supplier">{{ (order?.subsetItems)[0].supplierLabel }}</span>
+              <span class="separator">|</span>
+              <span class="order-type">Abholung ab {{ (order?.subsetItems)[0]?.estimatedShippingDate | date }}</span>
+            </ng-container>
+            <ng-container *ngIf="['Versand', 'B2B-Versand', 'DIG-Versand'].indexOf(order?.features?.orderType) > -1">
+              <span class="supplier">{{ (order?.subsetItems)[0].supplierLabel }}</span>
+              <span class="separator">|</span>
+              <span class="order-type">Versanddatum {{ (order?.subsetItems)[0]?.estimatedShippingDate | date }}</span>
+            </ng-container>
           </div>
         </div>
 
-        <span class="quantity">{{ order.quantity }}x</span>
-        <span class="price">{{ order.price?.value?.value | currency: ' ' }} {{ order.price?.value?.currency }}</span>
+        <div class="product-price">
+          <span class="quantity">{{ order.quantity }}x</span>
+          <span class="price">{{ order.price?.value?.value | currency: ' ' }} {{ order.price?.value?.currency }}</span>
+        </div>
       </div>
 
       <hr />
     </ng-container>
   </ng-container>
+</div>
 
-  <div class="footer">
-    <div class="overview">
-      <span class="promotion-points">{{ totalItemCount$ | async }} Artikel | {{ totalReadingPoints$ | async }} Lesepunkte</span>
+<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 class="price-wrapper">
+      <div class="total-price">Gesamtsumme {{ totalPrice$ | async | currency: ' ' }} {{ totalPriceCurrency$ | async }}</div>
+      <div class="price-info" *ngIf="containsDeliveryOrder$ | async">ohne Versandkosten</div>
     </div>
   </div>
 </div>

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

@@ -2,14 +2,9 @@
   @apply block box-border;
 }
 
-.check-icon {
-  @apply mx-auto text-green-700 pt-8;
-  width: 36px;
-}
-
 .card {
-  @apply bg-white rounded-card shadow-card;
-  height: calc(100vh - 45px);
+  @apply bg-white rounded-card shadow-card overflow-scroll;
+  height: calc(100vh - 420px);
 }
 
 .order-header {
@@ -20,101 +15,125 @@
   @apply text-center text-lg my-0 mb-2;
 }
 
-.order-details {
-  @apply mt-4;
-}
+.check-icon-wrapper {
+  @apply flex flex-row justify-center;
 
-.cta-print {
-  @apply bg-transparent text-brand font-bold text-xl outline-none border-none;
-}
+  .icon-circle {
+    @apply mt-px-40 mb-1;
+    background-color: #26830c;
+    border-radius: 50%;
+    width: 34px;
+  }
 
-.order-customer {
-  @apply font-bold text-2xl;
-}
-
-.grow {
-  @apply flex-grow;
+  .check-icon {
+    @apply mx-auto text-white;
+    width: 18px;
+  }
 }
 
 .row {
   @apply flex flex-row items-center mx-8 my-4;
-}
 
-.sub-row {
-  @apply flex flex-row flex-grow items-center w-1/2;
+  .sub-row {
+    @apply flex flex-row flex-grow items-center;
+    width: 55%;
+  }
+
+  .small {
+    width: 45%;
+  }
 
   .label {
-    @apply w-px-150;
+    width: 140px;
   }
 
   .value {
-    @apply ml-1;
+    @apply ml-4 text-right;
+  }
+
+  .order-customer {
+    @apply font-bold text-2xl;
+  }
+
+  .grow {
+    @apply flex-grow;
+  }
+
+  .cta-print {
+    @apply bg-transparent text-brand font-bold text-xl outline-none border-none;
   }
 }
 
-.thumbnail {
-  @apply mr-2;
-  width: 30px;
+.item-group-header {
+  @apply pb-0 pr-4 pt-1 text-lg font-bold;
+  height: 40px;
+
+  .icon-order-type {
+    @apply text-font-customer mr-3;
+  }
 }
 
-.name {
-  @apply font-bold whitespace-nowrap overflow-ellipsis overflow-hidden mx-2;
-  width: 200px;
+.order-details {
+  @apply mt-4;
 }
 
 .product-name {
   @apply flex flex-row;
+
+  .thumbnail {
+    @apply mr-2;
+    width: 30px;
+  }
+
+  .name {
+    @apply font-bold whitespace-nowrap overflow-ellipsis overflow-hidden mx-2 text-active-customer no-underline;
+    width: 170px;
+  }
 }
 
 .product-details {
   @apply flex flex-col whitespace-nowrap overflow-ellipsis overflow-hidden;
-  width: 300px;
+  width: 320px;
 
   .info-row {
     @apply whitespace-nowrap overflow-ellipsis overflow-hidden;
   }
+
+  .order-icon {
+    @apply w-px-15 text-ucla-blue;
+    height: 18px;
+    width: 35px;
+  }
+
+  .format {
+    @apply w-px-40;
+  }
+
+  .contributors {
+    @apply whitespace-nowrap overflow-ellipsis overflow-hidden;
+  }
 }
 
-.order-icon {
-  @apply w-px-15 text-ucla-blue;
-  height: 18px;
-  width: 35px;
-}
+.delivery-row {
+  .order-type {
+    @apply w-px-100 font-bold;
+  }
 
-.separator {
-  @apply mx-1;
-}
-
-.format {
-  @apply w-px-40;
-}
-
-.order-type {
-  @apply w-px-100 font-bold;
-}
-
-.contributors {
-  @apply whitespace-nowrap overflow-ellipsis overflow-hidden;
+  .supplier {
+    @apply ml-2;
+  }
 }
 
 .quantity {
-  @apply w-px-30 text-right;
+  @apply w-px-30 text-right font-semibold;
 }
 
 .price {
-  @apply w-px-100 font-bold text-right;
-}
-
-.price-info {
-  @apply text-right text-sm;
-}
-
-.between {
-  @apply justify-between;
+  @apply w-px-100 font-bold text-right ml-5;
 }
 
 .footer {
-  @apply flex flex-col justify-center items-center h-px-100;
+  @apply flex flex-col justify-center items-center h-px-100 mt-4 bg-white;
 
   .overview {
     @apply flex flex-row justify-between;
@@ -128,6 +147,10 @@
   .total-price {
     @apply font-bold text-cta-l;
   }
+
+  .price-info {
+    @apply text-right text-sm;
+  }
 }
 
 hr {
@@ -135,6 +158,10 @@ hr {
   @apply bg-disabled-customer;
 }
 
-.top-line {
-  @apply mt-8;
+.between {
+  @apply justify-between;
+}
+
+.separator {
+  @apply mx-1;
 }

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

@@ -41,9 +41,16 @@ export class CheckoutSummaryComponent {
     )
   );
 
-  constructor(private domainCheckoutService: DomainCheckoutService, private uiModal: UiModalService) {
-    // this.displayOrders$.subscribe((o) => console.log(o));
-  }
+  totalPriceCurrency$ = this.displayOrders$.pipe(map((displayOrders) => displayOrders[0]?.items[0]?.price?.value?.currency));
+
+  containsDeliveryOrder$ = this.displayOrders$.pipe(
+    map(
+      (displayOrders) =>
+        displayOrders.filter((o) => ['Versand', 'B2B-Versand', 'DIG-Versand'].indexOf(o.features?.orderType) > -1)?.length > 0
+    )
+  );
+
+  constructor(private domainCheckoutService: DomainCheckoutService, private uiModal: UiModalService) {}
 
   openPrintModal(id: number) {
     this.uiModal.open({

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

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