Merged PR 447: #1323 Hindernismeldung Styling und Actions

#1323 Hindernismeldung Styling und Actions
2025-12-28 22:42:11 +01:00 · 2021-01-25 17:27:14 +00:00
parent 88dd8bc926 80dbda2f4b
commit 24b2800286
5 changed files with 93 additions and 59 deletions
--- a/apps/domain/cart/src/lib/cart.service.ts
+++ b/apps/domain/cart/src/lib/cart.service.ts
@@ -21,7 +21,7 @@ export class CartService {
    throw new Error('Not Implemented');
  }

-  canAddItem(processId: number, availability: OLAAvailabilityDTO): Promise<boolean> {
+  canAddItem(processId: number, availability: OLAAvailabilityDTO): Promise<true | string> {
    throw new Error('Not Implemented');
  }
 }
--- a/apps/sales/src/app/modules/product/components/product-checkout/product-checkout.component.html
+++ b/apps/sales/src/app/modules/product/components/product-checkout/product-checkout.component.html
@@ -124,50 +124,60 @@

          <div class="product-information">
            <span class="book-title">{{ book.product.contributors }} - {{ book.product.name }}</span>
-            <span class="can-add-hint" *ngIf="!canAddItem"
-              >Leider können wir den Service mit den bereits ausgewählten Services im Warenkorb nicht kombinieren.</span
-            >
-            <span class="book-format">
-              <lib-icon class="order-book-icon" width="18px" height="18px" name="Icon_{{ book.product.format }}" alt="book-icon"></lib-icon>
-              {{ book.product.formatDetail }}
-            </span>
+            <span class="can-add-hint" *ngIf="!canAddItem">{{ availabilityMessage }}</span>

-            <span class="price">{{ selectedPrice | bookPrice }} {{ currency }}</span>
+            <div class="product-details">
+              <div class="product-column">
+                <span>
+                  <lib-icon
+                    class="order-book-icon"
+                    width="18px"
+                    height="18px"
+                    name="Icon_{{ book.product.format }}"
+                    alt="book-icon"
+                  ></lib-icon>
+                  {{ book.product.formatDetail }}
+                </span>

-            <span
-              class="order-details-delivery-info"
-              *ngIf="
-                deliveryType === 'Donwload' ||
-                deliveryType === 'Rücklage' ||
-                deliveryType === 'Versand' ||
-                !currentDeliveryDate ||
-                deliveryType === 'Abholung' ||
-                !currentPickUpDate
-              "
-            ></span>
-            <span class="order-details-delivery-info" *ngIf="deliveryType === deliveryOptions.delivery && currentDeliveryDate"
-              >Versanddatum {{ currentDeliveryDate }}</span
-            >
-            <span class="order-details-delivery-info" *ngIf="deliveryType === deliveryOptions.deliveryB2b"
-              >Versanddatum {{ b2bDeliveryDate | date: 'dd.MM.yy' }}</span
-            >
+                <span class="price">{{ selectedPrice | bookPrice }} {{ currency }}</span>

-            <span class="order-details-delivery-info" *ngIf="deliveryType === 'Abholung' && currentPickUpDate"
-              >Abholung ab {{ currentPickUpDate }}</span
-            >
+                <span
+                  class="order-details-delivery-info"
+                  *ngIf="
+                    deliveryType === 'Donwload' ||
+                    deliveryType === 'Rücklage' ||
+                    deliveryType === 'Versand' ||
+                    !currentDeliveryDate ||
+                    deliveryType === 'Abholung' ||
+                    !currentPickUpDate
+                  "
+                ></span>
+                <span class="order-details-delivery-info" *ngIf="deliveryType === deliveryOptions.delivery && currentDeliveryDate"
+                  >Versanddatum {{ currentDeliveryDate }}</span
+                >
+                <span class="order-details-delivery-info" *ngIf="deliveryType === deliveryOptions.deliveryB2b"
+                  >Versanddatum {{ b2bDeliveryDate | date: 'dd.MM.yy' }}</span
+                >
+
+                <span class="order-details-delivery-info" *ngIf="deliveryType === 'Abholung' && currentPickUpDate"
+                  >Abholung ab {{ currentPickUpDate }}</span
+                >
+              </div>
+              <div class="product-column">
+                <app-delete-dropdown
+                  [selected]="currentNumberOfItems"
+                  [options]="possibleItems"
+                  (valueChanges)="setNumberOfItems($event)"
+                  (delete)="deleteProduct()"
+                  (switch)="switchSteps(true)"
+                  [ddload]="true"
+                  [notUpdatable]="isDownload"
+                  #deleteDropdown
+                ></app-delete-dropdown>
+              </div>
+            </div>
          </div>
          <!-- TODO: populate here with delivery info like DHL I Lieferung 18.01.-->
-
-          <app-delete-dropdown
-            [selected]="currentNumberOfItems"
-            [options]="possibleItems"
-            (valueChanges)="setNumberOfItems($event)"
-            (delete)="deleteProduct()"
-            (switch)="switchSteps(true)"
-            [ddload]="true"
-            [notUpdatable]="isDownload"
-            #deleteDropdown
-          ></app-delete-dropdown>
        </div>
        <div class="secondary-info">
          <div class="errors">
@@ -196,12 +206,15 @@
        Artikel scannen
      </button>

-      <button class="btn-outline" (click)="updateCart()" [disabled]="(addItemsToCartDisabled || loading) && !isDownload">
+      <button class="btn-outline" (click)="continueSearch()" [disabled]="(addItemsToCartDisabled || loading) && !isDownload">
        Weiter suchen
      </button>
-      <app-button [primary]="true" [disabled]="(addItemsToCartDisabled || loading) && !isDownload" (action)="itemsConfirmed()">{{
-        confirmationBtnText
-      }}</app-button>
+      <app-button
+        [primary]="true"
+        [disabled]="(addItemsToCartDisabled || loading) && !isDownload"
+        (action)="canAddItem ? itemsConfirmed() : redirectRoute()"
+        >{{ confirmationBtnText }}</app-button
+      >
    </div>
  </div>
 </app-modal>
--- a/apps/sales/src/app/modules/product/components/product-checkout/product-checkout.component.scss
+++ b/apps/sales/src/app/modules/product/components/product-checkout/product-checkout.component.scss
@@ -239,15 +239,22 @@
      font-weight: bold;
    }

+    .product-details {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      margin-top: 25px;
+    }
+
+    .product-column {
+      display: flex;
+      flex-direction: column;
+    }
+
    .book-title {
      font-size: 16px;
      text-overflow: ellipsis;
      overflow: hidden;
-      white-space: nowrap;
-    }
-
-    .book-format {
-      margin-top: 25px;
    }

    .can-add-hint {
--- a/apps/sales/src/app/modules/product/components/product-checkout/product-checkout.component.ts
+++ b/apps/sales/src/app/modules/product/components/product-checkout/product-checkout.component.ts
@@ -8,7 +8,7 @@ import { ChangeCurrentRoute } from '../../../../core/store/actions/process.actio
 import { SetCartEntry } from '../../../../core/store/actions/cart-entry.actions';
 import { Subject, Observable, of } from 'rxjs';
 import { tap, map, filter, take } from 'rxjs/operators';
-import { AddBreadcrumb } from '../../../../core/store/actions/breadcrumb.actions';
+import { AddBreadcrumb, PopLastBreadcrumbs } from '../../../../core/store/actions/breadcrumb.actions';
 import { Breadcrumb } from '../../../../core/models/breadcrumb.model';
 import { BranchSelectors } from '../../../../core/store/selectors/branch.selector';
 import { ProductAvailability } from '../../../../core/models/product-availability.model';
@@ -89,6 +89,7 @@ export class ProductCheckoutComponent implements OnInit, OnDestroy {
  confirmationBtnText = 'Fortfahren';

  canAddItem: boolean = true;
+  availabilityMessage: string;

  // Trigger other functionality if needed
  @Output() closed: EventEmitter<boolean> = new EventEmitter();
@@ -600,8 +601,21 @@ export class ProductCheckoutComponent implements OnInit, OnDestroy {
  }

  async checkCanAdd() {
-    // TODO: Hindernissmeldung
-    this.canAddItem = await this.shoppingCartService.canAddItem(undefined, this.currentAvailability);
+    let result = await this.shoppingCartService.canAddItem(undefined, this.currentAvailability);
+    if (typeof result === 'string') {
+      this.canAddItem = false;
+      this.confirmationBtnText = 'Ohne Artikel fortfahren';
+      this.availabilityMessage = result;
+    } else {
+      this.canAddItem = true;
+      this.availabilityMessage = undefined;
+      this.confirmationBtnText = 'Fortfahren';
+    }
+  }
+
+  continueSearch() {
+    this.store.dispatch(new PopLastBreadcrumbs(''));
+    this.router.navigate(['/product/results']);
  }

  updateCart() {
@@ -639,7 +653,7 @@ export class ProductCheckoutComponent implements OnInit, OnDestroy {
    this.closeModal();
  }

-  private redirectRoute() {
+  redirectRoute() {
    if (this.customerAlredySet) {
      this.store.dispatch(new AddBreadcrumb(this.generateBreadcrumb(), 'shoppingCart', true));
      this.store.dispatch(new ChangeCurrentRoute('/cart/review'));
--- a/apps/sales/src/app/refact-imp/cart.refact-imp.ts
+++ b/apps/sales/src/app/refact-imp/cart.refact-imp.ts
@@ -11,7 +11,6 @@ import { StringDictionary } from '@cmf/core';
 import { ApplicationService } from '@core/application';
 import { CrmCustomerService } from '@domain/crm';
 import { CustomerDTO } from '@swagger/crm';
-import { UiDebugModalComponent, UiModalService } from '@ui/modal';

@Injectable()
 export class CartRefactImp implements CartService {
@@ -19,8 +18,7 @@ export class CartRefactImp implements CartService {
    private store: Store,
    private checkoutService: StoreCheckoutService,
    private applicationService: ApplicationService,
-    private customerService: CrmCustomerService,
-    private uiModal: UiModalService
+    private customerService: CrmCustomerService
  ) {}

  getItems(processId: number): Observable<CartItem[]> {
@@ -103,7 +101,7 @@ export class CartRefactImp implements CartService {
    );
  }

-  async canAddItem(processId: number, availability: OLAAvailabilityDTO): Promise<boolean> {
+  async canAddItem(processId: number, availability: OLAAvailabilityDTO): Promise<true | string> {
    const getCustomerIdByProcessIdFn = await this.store.select(CustomerSelectors.getActiveUser).pipe(first()).toPromise();

    let customerId: number;
@@ -135,8 +133,10 @@ export class CartRefactImp implements CartService {
            .StoreCheckoutCanAddItem({ shoppingCartId: cartId, payload: { customerFeatures, availabilities: [availability] } })
            .pipe(
              map((res) => {
-                this.uiModal.open({ content: UiDebugModalComponent, data: res });
-                return res.result.ok;
+                if (res.result.ok) {
+                  return true;
+                }
+                return res.message;
              })
            );
        })