#1477 Zwischenstand Routing bei Klick auf Mueltonne, Anzeige wenn Warenkorb leer

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

@@ -1,142 +1,163 @@
-<ng-container *ngIf="shoppingCart$ | async; let shoppingCart">
-  <div class="card stretch">
-    <div class="cta-print-wrapper">
-      <button class="cta-print" (click)="openPrintModal()">
-        Drucken
-      </button>
-    </div>
-    <h1 class="header">Warenkorb</h1>
-    <h5 class="sub-header">Überprüfen Sie die Details.</h5>
-    <hr />
-    <div class="row">
-      <div class="label">
-        Rechnugsadresse
+<ng-container *ngIf="(groupedItems$ | async)?.length <= 0">
+  <div class="card stretch card-empty">
+    <div class="empty-message">
+      <!-- <ui-icon icon="shopping-cart-white"></ui-icon> -->
+      <h1>Ihr Warenkorb ist leer.</h1>
+      <p>
+        Sie haben alle Artikel aus dem<br />
+        Warenkorb entfernt oder noch<br />
+        keinen Artikel hinzugefügt.
+      </p>
+
+      <div class="btn-wrapper">
+        <a class="cta-article" [routerLink]="['/product', 'search']">Artikel suchen</a>
       </div>
-      <div class="value">
-        {{ payer$ | async | payerAddress | trim: 55 }}
-      </div>
-      <div class="grow"></div>
-      <div>
-        <button class="cta-edit">
-          Ändern
-        </button>
-      </div>
-    </div>
-    <hr />
-    <div class="row">
-      <page-notification-channels></page-notification-channels>
-    </div>
-    <hr />
-    <ng-container *ngFor="let group of groupedItems$ | async; let lastGroup = last">
-      <div class="row item-group-header">
-        <ui-icon
-          class="icon-order-type"
-          [size]="group.orderType === 'B2B-Versand' ? '50px' : '25px'"
-          [icon]="
-            group.orderType === 'Abholung'
-              ? 'box_out'
-              : group.orderType === 'Versand'
-              ? 'truck'
-              : group.orderType === 'Rücklage'
-              ? 'shopping_bag'
-              : group.orderType === 'B2B-Versand'
-              ? 'truck_b2b'
-              : group.orderType === 'Download'
-              ? 'download'
-              : 'truck'
-          "
-        ></ui-icon>
-        <div class="label">
-          {{ group.orderType }}
-        </div>
-      </div>
-      <ng-container *ngIf="group.orderType === 'Versand' || group.orderType === 'B2B-Versand' || group.orderType === 'DIG-Versand'">
-        <hr />
-        <div class="row">
-          <div class="label">
-            Lieferadresse
-          </div>
-          <div class="value">
-            {{ shippingAddress$ | async | shippingAddress | trim: 55 }}
-          </div>
-          <div class="grow"></div>
-          <div>
-            <button class="cta-edit">
-              Ändern
-            </button>
-          </div>
-        </div>
-      </ng-container>
-      <ng-container *ngIf="group.orderType === 'Abholung'">
-        <hr />
-        <div class="row">
-          <div class="label">
-            Filiale
-          </div>
-          <div class="value">
-            {{ shippingAddress$ | async | shippingAddress | trim: 55 }}
-          </div>
-        </div>
-      </ng-container>
-      <hr />
-      <ng-container *ngFor="let item of group.items; let lastItem = last">
-        <div class="row product-container">
-          <div class="product-image">
-            <img [src]="item?.product?.ean | productImage: 50:50:true" alt="product-image" />
-          </div>
-          <div class="product-name">
-            <a [queryParams]="{ type: 'ean' }" [routerLink]="['/product', 'details', item?.product?.ean]">{{ item?.product?.name }}</a>
-          </div>
-          <div
-            class="product-misc-container"
-            [style]="group.orderType !== 'Rücklage' && group.orderType !== 'Download' ? 'margin-top: 1.25rem' : ''"
-          >
-            <div class="product-misc">
-              <img class="book-icon" [src]="'/assets/images/Icon_' + item?.product?.format + '.svg'" alt="book-icon" />
-              {{ item?.product?.manufacturer + ' | ' + item?.product?.contributors | trim: 30 }}
-            </div>
-            <div *ngIf="group.orderType !== 'Rücklage' && group.orderType !== 'Download'" class="product-delivery">
-              {{ group.orderType }} {{ group.orderType === 'Abholung' ? 'ab' : '' }} {{ item?.availability?.estimatedShippingDate | date }}
-            </div>
-          </div>
-          <div class="product-price">
-            {{ item?.unitPrice?.value?.value | currency: item?.unitPrice?.value?.currency:'code' }}
-          </div>
-          <div class="product-quantity">
-            <page-quantity-control
-              [ngModel]="item?.quantity"
-              (ngModelChange)="updateItemQuantity(item, $event)"
-              [showSpinner]="showQuantityControlSpinnerItemId === item.id"
-            ></page-quantity-control>
-          </div>
-          <div>
-            <button class="cta-edit" (click)="changeItem(item)" [disabled]="showChangeButtonSpinnerItemId">
-              <ui-spinner [show]="showChangeButtonSpinnerItemId === item.id">
-                Ändern
-              </ui-spinner>
-            </button>
-          </div>
-        </div>
-        <hr *ngIf="!lastItem" />
-      </ng-container>
-      <hr *ngIf="!lastGroup" />
-    </ng-container>
-  </div>
-  <div class="card footer row">
-    <div class="total-item-reading-points">{{ totalItemCount$ | async }} Artikel | {{ totalReadingPoints$ | async }} Lesepunkte</div>
-    <div class="grow"></div>
-    <div class="total-cta-container">
-      <div class="total-container">
-        <strong class="total-value">
-          Zwischensumme {{ shoppingCart?.total?.value | currency: shoppingCart?.total?.currency:'code' }}
-        </strong>
-        <span class="shipping-cost-info">ohne Versandkosten</span>
-      </div>
-      <button class="cta-order" (click)="order()" [disabled]="showOrderButtonSpinner">
-        <ui-spinner [show]="showOrderButtonSpinner">
-          Bestellen
-        </ui-spinner>
-      </button>
     </div>
   </div>
 </ng-container>
+
+<ng-container *ngIf="(groupedItems$ | async)?.length > 0">
+  <ng-container *ngIf="shoppingCart$ | async; let shoppingCart">
+    <div class="card stretch">
+      <div class="cta-print-wrapper">
+        <button class="cta-print" (click)="openPrintModal()">
+          Drucken
+        </button>
+      </div>
+      <h1 class="header">Warenkorb</h1>
+      <h5 class="sub-header">Überprüfen Sie die Details.</h5>
+      <hr />
+      <div class="row">
+        <div class="label">
+          Rechnugsadresse
+        </div>
+        <div class="value">
+          {{ payer$ | async | payerAddress | trim: 55 }}
+        </div>
+        <div class="grow"></div>
+        <div>
+          <button class="cta-edit">
+            Ändern
+          </button>
+        </div>
+      </div>
+      <hr />
+      <div class="row">
+        <page-notification-channels></page-notification-channels>
+      </div>
+      <hr />
+      <ng-container *ngFor="let group of groupedItems$ | async; let lastGroup = last">
+        <div class="row item-group-header">
+          <ui-icon
+            class="icon-order-type"
+            [size]="group.orderType === 'B2B-Versand' ? '50px' : '25px'"
+            [icon]="
+              group.orderType === 'Abholung'
+                ? 'box_out'
+                : group.orderType === 'Versand'
+                ? 'truck'
+                : group.orderType === 'Rücklage'
+                ? 'shopping_bag'
+                : group.orderType === 'B2B-Versand'
+                ? 'truck_b2b'
+                : group.orderType === 'Download'
+                ? 'download'
+                : 'truck'
+            "
+          ></ui-icon>
+          <div class="label">
+            {{ group.orderType }}
+          </div>
+        </div>
+        <ng-container *ngIf="group.orderType === 'Versand' || group.orderType === 'B2B-Versand' || group.orderType === 'DIG-Versand'">
+          <hr />
+          <div class="row">
+            <div class="label">
+              Lieferadresse
+            </div>
+            <div class="value">
+              {{ shippingAddress$ | async | shippingAddress | trim: 55 }}
+            </div>
+            <div class="grow"></div>
+            <div>
+              <button class="cta-edit">
+                Ändern
+              </button>
+            </div>
+          </div>
+        </ng-container>
+        <ng-container *ngIf="group.orderType === 'Abholung'">
+          <hr />
+          <div class="row">
+            <div class="label">
+              Filiale
+            </div>
+            <div class="value">
+              {{ shippingAddress$ | async | shippingAddress | trim: 55 }}
+            </div>
+          </div>
+        </ng-container>
+        <hr />
+        <ng-container *ngFor="let item of group.items; let lastItem = last">
+          <div class="row product-container">
+            <div class="product-image">
+              <img [src]="item?.product?.ean | productImage: 50:50:true" alt="product-image" />
+            </div>
+            <div class="product-name">
+              <a [queryParams]="{ type: 'ean' }" [routerLink]="['/product', 'details', item?.product?.ean]">{{ item?.product?.name }}</a>
+            </div>
+            <div
+              class="product-misc-container"
+              [style]="group.orderType !== 'Rücklage' && group.orderType !== 'Download' ? 'margin-top: 1.25rem' : ''"
+            >
+              <div class="product-misc">
+                <img class="book-icon" [src]="'/assets/images/Icon_' + item?.product?.format + '.svg'" alt="book-icon" />
+                {{ item?.product?.manufacturer + ' | ' + item?.product?.contributors | trim: 30 }}
+              </div>
+              <div *ngIf="group.orderType !== 'Rücklage' && group.orderType !== 'Download'" class="product-delivery">
+                {{ group.orderType }} {{ group.orderType === 'Abholung' ? 'ab' : '' }}
+                {{ item?.availability?.estimatedShippingDate | date }}
+              </div>
+            </div>
+            <div class="product-price">
+              {{ item?.unitPrice?.value?.value | currency: item?.unitPrice?.value?.currency:'code' }}
+            </div>
+            <div class="product-quantity">
+              <page-quantity-control
+                [ngModel]="item?.quantity"
+                (ngModelChange)="updateItemQuantity(item, $event)"
+                [showSpinner]="showQuantityControlSpinnerItemId === item.id"
+              ></page-quantity-control>
+            </div>
+            <div>
+              <button class="cta-edit" (click)="changeItem(item)" [disabled]="showChangeButtonSpinnerItemId">
+                <ui-spinner [show]="showChangeButtonSpinnerItemId === item.id">
+                  Ändern
+                </ui-spinner>
+              </button>
+            </div>
+          </div>
+          <hr *ngIf="!lastItem" />
+        </ng-container>
+        <hr *ngIf="!lastGroup" />
+      </ng-container>
+    </div>
+    <div class="card footer row">
+      <div class="total-item-reading-points">{{ totalItemCount$ | async }} Artikel | {{ totalReadingPoints$ | async }} Lesepunkte</div>
+      <div class="grow"></div>
+      <div class="total-cta-container">
+        <div class="total-container">
+          <strong class="total-value">
+            Zwischensumme {{ shoppingCart?.total?.value | currency: shoppingCart?.total?.currency:'code' }}
+          </strong>
+          <span class="shipping-cost-info">ohne Versandkosten</span>
+        </div>
+        <button class="cta-order" (click)="order()" [disabled]="showOrderButtonSpinner">
+          <ui-spinner [show]="showOrderButtonSpinner">
+            Bestellen
+          </ui-spinner>
+        </button>
+      </div>
+    </div>
+  </ng-container>
+</ng-container>

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

@@ -13,6 +13,34 @@
   @apply bg-white rounded-card shadow-card;
 }
 
+.card-empty {
+  max-height: calc(100vh - 250px);
+}
+
+.empty-message {
+  @apply flex flex-col justify-center h-full text-center ml-auto mr-auto;
+  width: fit-content;
+
+  h1 {
+    @apply text-2xl font-bold my-0;
+    font-size: 26px;
+  }
+
+  p {
+    @apply my-0;
+    font-size: 22px;
+  }
+
+  .btn-wrapper {
+    @apply mt-px-40 text-center;
+  }
+
+  a {
+    @apply no-underline;
+    width: 50%;
+  }
+}
+
 .cta-print-wrapper {
   @apply px-4 pt-4 text-right;
 }
@@ -22,7 +50,8 @@
   @apply bg-transparent text-brand font-bold text-xl outline-none border-none;
 }
 
-.cta-order {
+.cta-order,
+.cta-article {
   @apply bg-brand text-white font-bold text-lg outline-none border-none rounded-full px-6 py-3;
 }
 

apps/page/checkout/src/lib/modals/purchasing-options-modal/purchasing-options-modal.component.html

@@ -45,7 +45,7 @@
         <page-quantity-control
           [showSpinner]="purchasingOptionsModalStore.selectFetchingAvailability | async"
           [ngModel]="quantity$ | async"
-          (ngModelChange)="purchasingOptionsModalStore.setQuantity($event)"
+          (ngModelChange)="changeQuantity($event)"
         ></page-quantity-control>
       </div>
       <button (click)="backToSetOptions()" class="cta-modify">Ändern</button>

apps/page/checkout/src/lib/modals/purchasing-options-modal/purchasing-options-modal.component.ts

@@ -61,6 +61,18 @@ export class PurchasingOptionsModalComponent {
     this.purchasingOptionsModalStore.setOption(undefined);
   }
 
+  async changeQuantity(quantity: number = 1) {
+    this.purchasingOptionsModalStore.setQuantity(quantity);
+
+    if (quantity === 0) {
+      if (!this.router.url.startsWith('/product/details')) {
+        let item = await this.item$.pipe(first()).toPromise();
+        this.router.navigate(['/product', 'details', item.product.ean], { queryParams: { type: 'ean' } });
+      }
+      this.modalRef.close();
+    }
+  }
+
   async continue(navigate: boolean = false) {
     this.activeSpinner = navigate ? 'continue-shopping' : 'continue';
     try {