Merge branch 'feature/1407-Checkout' of https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend into feature/1407-Checkout

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

@@ -113,12 +113,14 @@
             <page-quantity-control
               [ngModel]="item?.quantity"
               (ngModelChange)="updateItemQuantity(item, $event)"
-              [showSpinner]="showQuantityControlSpinner"
+              [showSpinner]="showQuantityControlSpinnerItemId === item.id"
             ></page-quantity-control>
           </div>
           <div>
-            <button class="cta-edit" (click)="changeItem(item)">
-              Ändern
+            <button class="cta-edit" (click)="changeItem(item)" [disabled]="showChangeButtonSpinnerItemId">
+              <ui-spinner [show]="showChangeButtonSpinnerItemId === item.id">
+                Ändern
+              </ui-spinner>
             </button>
           </div>
         </div>

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

@@ -1,4 +1,4 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
 import { Router } from '@angular/router';
 import { ApplicationService } from '@core/application';
 import { AvailabilityService } from '@domain/availability';
@@ -64,8 +64,9 @@ export class CheckoutReviewComponent {
     switchMap((processId) => this.domainCheckoutService.getCustomerFeatures({ processId }))
   );
 
-  showQuantityControlSpinner: boolean;
+  showQuantityControlSpinnerItemId: number;
   showOrderButtonSpinner: boolean;
+  showChangeButtonSpinnerItemId: number;
 
   constructor(
     private domainCheckoutService: DomainCheckoutService,
@@ -74,10 +75,12 @@ export class CheckoutReviewComponent {
     private search: SearchService,
     private uiModal: UiModalService,
     private sso: SsoService,
-    private router: Router
+    private router: Router,
+    private cdr: ChangeDetectorRef
   ) {}
 
   async changeItem(shoppingCartItem: ShoppingCartItemDTO) {
+    this.showChangeButtonSpinnerItemId = shoppingCartItem.id;
     const item = await this.search
       .SearchSearch({
         input: { qs: shoppingCartItem.product.ean },
@@ -180,6 +183,9 @@ export class CheckoutReviewComponent {
         break;
     }
 
+    this.showChangeButtonSpinnerItemId = undefined;
+    this.cdr.markForCheck();
+
     this.uiModal.open({
       content: PurchasingOptionsModalComponent,
       data: {
@@ -194,7 +200,7 @@ export class CheckoutReviewComponent {
   }
 
   async updateItemQuantity(shoppingCartItem: ShoppingCartItemDTO, quantity: number) {
-    this.showQuantityControlSpinner = true;
+    this.showQuantityControlSpinnerItemId = shoppingCartItem.id;
     const orderType = shoppingCartItem?.features?.orderType;
     let availability: AvailabilityDTO;
 
@@ -243,7 +249,7 @@ export class CheckoutReviewComponent {
     } else {
       // TODO: Set Prev Quantity
     }
-    this.showQuantityControlSpinner = false;
+    this.showQuantityControlSpinnerItemId = undefined;
   }
 
   order() {

apps/page/checkout/src/lib/modals/purchasing-options-modal/b2b-delivery-option/b2b-delivery-option.component.scss

@@ -1,8 +1,8 @@
 .option-icon {
-  margin-top: -5px;
-  width: 80px;
+  margin-top: -12px;
+  width: 70px;
 }
 
 h4 {
-  margin-top: -10px;
+  margin-top: -2px;
 }

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

@@ -7,9 +7,11 @@
   <span class="price"
     >{{ item.catalogAvailability?.price?.value?.value | currency: ' ' }} {{ item.catalogAvailability?.price?.value?.currency }}</span
   >
+
+  <div class="grow"></div>
   <span class="delivery">Versandkostenfrei</span>
   <span class="date">Versanddatum <strong>27.02.21</strong></span>
-  <div class="grow"></div>
+
   <div>
     <button type="button" class="select-option" (click)="select()">
       Auswählen

apps/page/checkout/src/lib/modals/purchasing-options-modal/option.scss

@@ -5,7 +5,7 @@
 
 .option-icon {
   @apply text-ucla-blue mx-auto;
-  width: 50px;
+  width: 40px;
 }
 
 h4 {

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

@@ -11,7 +11,7 @@
 }
 
 .options-wrapper {
-  @apply flex flex-row justify-evenly items-stretch;
+  @apply flex flex-row justify-evenly items-stretch mt-2;
 }
 
 .option-product-summary {

apps/sales/src/app/modules/product/components/branches-avalability-overview/branches-avalability-overview.component.ts

@@ -23,6 +23,8 @@ export class BranchesAvalabilityOverviewComponent implements OnInit, OnDestroy {
   branchInfos: BranchInfoView[] = [];
   filteredBranchInfos: BranchInfoView[] = [];
   userBranch: BranchDTO;
+  @Output() loaded = new EventEmitter<void>();
+
   @Output() destroymodal: EventEmitter<boolean> = new EventEmitter();
 
   destroy$ = new Subject();
@@ -76,6 +78,7 @@ export class BranchesAvalabilityOverviewComponent implements OnInit, OnDestroy {
       .subscribe((t) => {
         this.branchInfos = t.filter((b) => b && b.load);
         this.filteredBranchInfos = this.loadDefaultBranches();
+        this.loaded.emit();
       });
   }
 

apps/sales/src/app/modules/product/pages/product-details/product-details.component.html

@@ -218,9 +218,9 @@
       </div>
     </ng-template>
     <div class="actions align-right" [ngClass]="{ 'action-partly-loaded': !fullyLoaded }">
-      <app-button (action)="openBranchesAvailabilityModal()" *ngIf="product.formatIcon !== 'EB' && product.formatIcon !== 'DL'"
-        >weitere Verfügbarkeiten</app-button
-      >
+      <app-button (action)="openBranchesAvailabilityModal()" *ngIf="product.formatIcon !== 'EB' && product.formatIcon !== 'DL'">
+        weitere Verfügbarkeiten
+      </app-button>
       <app-button
         [primary]="true"
         [load]="true"
@@ -281,6 +281,7 @@
 
 <ng-container *ngIf="item && loadBranchesInfoComponent">
   <app-branches-avalability-overview
+    (loaded)="branchesAvailabilityInfo.openDialog()"
     (destroymodal)="destroyAvailabilityModal($event)"
     [item]="item"
     #branchesAvailabilityInfo

apps/sales/src/app/modules/product/pages/product-details/product-details.component.ts

@@ -512,7 +512,6 @@ export class ProductDetailsComponent implements OnInit, OnDestroy {
   openBranchesAvailabilityModal() {
     this.loadBranchesInfoComponent = true;
     this.detectChanges();
-    this.branchesAvailabilityInfo.openDialog();
   }
 
   destroyAvailabilityModal() {