fix(domain-oms, page-pickup-shelf): Fixed Reorder Logic flow, early exit if Modal gets closed to maintain the Data in the Store

Ref: #5537

apps/isa-app/src/domain/oms/action-handlers/re-order.action-handler.ts

@@ -4,7 +4,10 @@ import { OrderItemsContext } from './order-items.context';
 import { UiModalService } from '@ui/modal';
 import { ReorderModalComponent, ReorderResult } from '@modal/reorder';
 import { DomainCheckoutService } from '@domain/checkout';
-import { AvailabilityDTO2, OrderItemListItemDTO } from '@generated/swagger/oms-api';
+import {
+  AvailabilityDTO2,
+  OrderItemListItemDTO,
+} from '@generated/swagger/oms-api';
 import { ToasterService } from '@shared/shell';
 
 @Injectable()
@@ -22,18 +25,36 @@ export class ReOrderActionHandler extends ActionHandler<OrderItemsContext> {
     const updatedItems: OrderItemListItemDTO[] = [];
     for (const orderItem of data.items) {
       const result = await this._uiModal
-        .open<ReorderResult, { item: OrderItemListItemDTO; showReasons: boolean }>({
+        .open<
+          ReorderResult,
+          { item: OrderItemListItemDTO; showReasons: boolean }
+        >({
           content: ReorderModalComponent,
           title: 'Artikel nachbestellen',
           data: {
-            item: { ...orderItem, quantity: data.itemQuantity?.get(orderItem.orderItemSubsetId) ?? orderItem.quantity },
+            item: {
+              ...orderItem,
+              quantity:
+                data.itemQuantity?.get(orderItem.orderItemSubsetId) ??
+                orderItem.quantity,
+            },
             showReasons: true,
           },
         })
         .afterClosed$.toPromise();
+
+      // #5537 - If no result or no data, skip to next item
+      if (!result || !result.data) {
+        return;
+      }
+
       if (result.data) {
         if (result.data.action === 'REORDER') {
-          const reorderResult = await this.reorder(result.data.item, result.data.availability, result.data.comment);
+          const reorderResult = await this.reorder(
+            result.data.item,
+            result.data.availability,
+            result.data.comment,
+          );
           const resItem = reorderResult.item1;
 
           this.createToast(result?.data?.comment);
@@ -57,8 +78,6 @@ export class ReOrderActionHandler extends ActionHandler<OrderItemsContext> {
           context = await this._command.handleCommand('NOTAVAILABLE', context);
           updatedItems.push(...context.items);
         }
-      } else {
-        return data;
       }
     }
 
@@ -77,24 +96,33 @@ export class ReOrderActionHandler extends ActionHandler<OrderItemsContext> {
     }
   }
 
-  async reorder(orderItem: OrderItemListItemDTO, availability: AvailabilityDTO2, comment: string) {
+  async reorder(
+    orderItem: OrderItemListItemDTO,
+    availability: AvailabilityDTO2,
+    comment: string,
+  ) {
     return await this._domainCheckoutService
-      .reorder(orderItem.orderId, orderItem.orderItemId, orderItem.orderItemSubsetId, {
-        quantity: orderItem.quantity,
-        comment,
-        availability: {
-          availabilityType: availability.status,
-          ssc: availability.ssc,
-          sscText: availability.sscText,
-          supplier: {
-            id: availability.supplierId,
+      .reorder(
+        orderItem.orderId,
+        orderItem.orderItemId,
+        orderItem.orderItemSubsetId,
+        {
+          quantity: orderItem.quantity,
+          comment,
+          availability: {
+            availabilityType: availability.status,
+            ssc: availability.ssc,
+            sscText: availability.sscText,
+            supplier: {
+              id: availability.supplierId,
+            },
+            isPrebooked: availability.isPrebooked,
+            estimatedShippingDate: availability.at,
+            price: availability.price,
+            inStock: availability.qty,
           },
-          isPrebooked: availability.isPrebooked,
-          estimatedShippingDate: availability.at,
-          price: availability.price,
-          inStock: availability.qty,
         },
-      })
+      )
       .toPromise();
   }
 }

apps/isa-app/src/page/customer/customer-search/details-main-view/details-main-view-billing-addresses/details-main-view-billing-addresses.component.ts

@@ -166,6 +166,11 @@ export class DetailsMainViewBillingAddressesComponent
               customer as unknown as Customer,
             ),
           );
+          // Clear the selected payer ID when using customer address
+          this.crmTabMetadataService.setSelectedPayerId(
+            this.tabId(),
+            undefined,
+          );
         }
       });
   }

apps/isa-app/src/page/customer/customer-search/details-main-view/details-main-view-delivery-addresses/details-main-view-delivery-addresses.component.ts

@@ -191,6 +191,11 @@ export class DetailsMainViewDeliveryAddressesComponent
               customer as unknown as Customer,
             ),
           );
+          // Clear the selected shipping address ID when using customer address
+          this.crmTabMetadataService.setSelectedShippingAddressId(
+            this.tabId(),
+            undefined,
+          );
         }
       });
   }

apps/isa-app/src/page/pickup-shelf/pickup-shelf-details-base.component.ts

@@ -3,7 +3,10 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ActivatedRoute, Router } from '@angular/router';
 import { PickupShelfDetailsStore, PickupShelfStore } from './store';
 import { ActionHandlerService } from './services/action-handler.service';
-import { DBHOrderItemListItemDTO, KeyValueDTOOfStringAndString } from '@generated/swagger/oms-api';
+import {
+  DBHOrderItemListItemDTO,
+  KeyValueDTOOfStringAndString,
+} from '@generated/swagger/oms-api';
 import { OrderItemsContext } from '@domain/oms';
 import { map } from 'rxjs/operators';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
@@ -22,7 +25,9 @@ export abstract class PickupShelfDetailsBaseComponent {
 
   get side() {
     if (this.activatedRoute.snapshot.queryParams.side !== undefined) {
-      return coerceBooleanProperty(this.activatedRoute.snapshot.queryParams.side);
+      return coerceBooleanProperty(
+        this.activatedRoute.snapshot.queryParams.side,
+      );
     }
     return true;
   }
@@ -37,23 +42,33 @@ export abstract class PickupShelfDetailsBaseComponent {
   );
 
   constructor() {
-    this.activatedRoute.params.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((params) => {
-      // // Fix #4508 - Always Reset Cover Items before fetching new ones inside pickup-shelf-in-details.component
-      if (this.store.coverOrderItems?.length) {
-        this.store.resetCoverItems();
-      }
-      this.store.fetchOrder({ orderId: Number(params.orderId) });
+    this.activatedRoute.params
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((params) => {
+        // // Fix #4508 - Always Reset Cover Items before fetching new ones inside pickup-shelf-in-details.component
+        if (this.store.coverOrderItems?.length) {
+          this.store.resetCoverItems();
+        }
+        this.store.fetchOrder({ orderId: Number(params.orderId) });
 
-      this.store.fetchOrderItems({
-        orderNumber: params.orderNumber ? decodeURIComponent(params.orderNumber) : undefined,
-        compartmentCode: params.compartmentCode ? decodeURIComponent(params.compartmentCode) : undefined,
-        compartmentInfo: params.compartmentInfo ? decodeURIComponent(params.compartmentInfo) : undefined,
-        orderItemProcessingStatus: (params.orderItemProcessingStatus
-          ? +params.orderItemProcessingStatus
-          : undefined) as any,
-        orderItemSubsetId: params.orderItemSubsetId ? +params.orderItemSubsetId : undefined,
+        this.store.fetchOrderItems({
+          orderNumber: params.orderNumber
+            ? decodeURIComponent(params.orderNumber)
+            : undefined,
+          compartmentCode: params.compartmentCode
+            ? decodeURIComponent(params.compartmentCode)
+            : undefined,
+          compartmentInfo: params.compartmentInfo
+            ? decodeURIComponent(params.compartmentInfo)
+            : undefined,
+          orderItemProcessingStatus: (params.orderItemProcessingStatus
+            ? +params.orderItemProcessingStatus
+            : undefined) as any,
+          orderItemSubsetId: params.orderItemSubsetId
+            ? +params.orderItemSubsetId
+            : undefined,
+        });
       });
-    });
   }
 
   /**
@@ -78,23 +93,19 @@ export abstract class PickupShelfDetailsBaseComponent {
       action,
       items: this.store.selectedOrderItems,
       compartmentCode: latestCompartmentCode ?? undefined, // Ticket #4391 - if undefined, assign new compartmentCode to item (bei eingetroffen und drucken)
-      compartmentInfo: latestCompartmentInfo ?? (this.store.selectedCompartmentInfo || this.store.compartmentInfo), // Ticket #4397
+      compartmentInfo:
+        latestCompartmentInfo ??
+        (this.store.selectedCompartmentInfo || this.store.compartmentInfo), // Ticket #4397
       order: this.store.order,
       itemQuantity: this.store.selectedOrderItemQuantity,
     });
 
     const ctxItem = ctx?.items[0];
 
-    // Ticket #4466 - Nach der nachbestellung wurde der Artikel in den Details nicht mehr angezeigt - änderung #4459 rückgängig gemacht
-    // Ticket #4459 - Usecase Abholfach Nachbestellen - Wenn das selektierte Item nicht verändert wurde z.B. beim schließen des nachbestellen Modals
-    // soll hier returned werden, da der unveränderte Stand angezeigt werden soll
-    // if (
-    //   !ctxItem ||
-    //   (action.command.includes('REORDER') &&
-    //     ctxItem.orderItemSubsetId === this.store.selectedOrderItems.find((_) => true).orderItemSubsetId)
-    // ) {
-    //   return;
-    // }
+    // #5537 - If REORDER action and no context item, return early to avoid unnecessary clearing and fetching
+    if (action.command.includes('REORDER') && !ctxItem) {
+      return;
+    }
 
     this.store.setFetchPartial(false);
     this.store.resetSelectedOrderItems();
@@ -104,20 +115,29 @@ export abstract class PickupShelfDetailsBaseComponent {
 
     if (!ctxItem) return;
 
-    const updatedDetailsItems = await new Promise<DBHOrderItemListItemDTO[]>((resolve, reject) => {
-      this.store.fetchOrderItems({
-        orderNumber: ctxItem.orderNumber,
-        compartmentCode: ctxItem.processingStatus === 128 ? ctxItem.compartmentCode : undefined,
-        compartmentInfo: ctxItem.processingStatus === 128 ? ctxItem.compartmentInfo : undefined,
-        orderItemProcessingStatus: ctxItem.processingStatus,
-        orderItemSubsetId: ctxItem.orderItemSubsetId,
-        done: { resolve, reject },
-      });
-    });
+    const updatedDetailsItems = await new Promise<DBHOrderItemListItemDTO[]>(
+      (resolve, reject) => {
+        this.store.fetchOrderItems({
+          orderNumber: ctxItem.orderNumber,
+          compartmentCode:
+            ctxItem.processingStatus === 128
+              ? ctxItem.compartmentCode
+              : undefined,
+          compartmentInfo:
+            ctxItem.processingStatus === 128
+              ? ctxItem.compartmentInfo
+              : undefined,
+          orderItemProcessingStatus: ctxItem.processingStatus,
+          orderItemSubsetId: ctxItem.orderItemSubsetId,
+          done: { resolve, reject },
+        });
+      },
+    );
 
     ctx.items.forEach((item) => {
       const updatedItem = updatedDetailsItems?.find(
-        (detailsItem) => detailsItem?.orderItemSubsetId === item?.orderItemSubsetId,
+        (detailsItem) =>
+          detailsItem?.orderItemSubsetId === item?.orderItemSubsetId,
       );
 
       if (!updatedItem) return;

libs/checkout/data-access/src/lib/helpers/get-shopping-cart-item-key.helper.ts

@@ -4,12 +4,13 @@ import {
 } from '@isa/checkout/data-access';
 
 /**
- * Creates a unique key for an item based on EAN, destination, and orderItemType.
+ * Creates a unique key for an item based on EAN, targetBranchId, and orderItemType.
  * Items are only considered identical if all three match.
  */
 export const getItemKey = (item: ShoppingCartItem): string => {
   const ean = item.product.ean ?? 'no-ean';
-  const destinationId = item.destination?.data?.id ?? 'no-destination';
+  const targetBranchId =
+    item.destination?.data?.targetBranch?.id ?? 'no-target-branch-id';
   const orderType = getOrderTypeFeature(item.features) ?? 'no-orderType';
-  return `${ean}|${destinationId}|${orderType}`;
+  return `${ean}|${targetBranchId}|${orderType}`;
 };

libs/checkout/feature/reward-order-confirmation/src/lib/order-confirmation-header/order-confirmation-header.component.ts

@@ -49,7 +49,7 @@ export class OrderConfirmationHeaderComponent {
     if (!orders || orders.length === 0) {
       return '';
     }
-    return orders
+    const formattedDates = orders
       .map((order) => {
         if (!order.orderDate) {
           return null;
@@ -60,7 +60,8 @@ export class OrderConfirmationHeaderComponent {
         );
         return formatted ? `${formatted} Uhr` : null;
       })
-      .filter(Boolean)
-      .join('; ');
+      .filter(Boolean);
+
+    return [...new Set(formattedDates)].join('; ');
   });
 }

libs/checkout/feature/reward-shopping-cart/src/lib/reward-shopping-cart-item/reward-shopping-cart-item-quantity-control.component.ts

@@ -66,7 +66,8 @@ export class RewardShoppingCartItemQuantityControlComponent {
     if (
       orderType === OrderTypeFeature.Delivery ||
       orderType === OrderTypeFeature.DigitalShipping ||
-      orderType === OrderTypeFeature.B2BShipping
+      orderType === OrderTypeFeature.B2BShipping ||
+      orderType === OrderTypeFeature.Pickup
     ) {
       return 999;
     }

libs/checkout/feature/reward-shopping-cart/src/lib/reward-shopping-cart-item/reward-shopping-cart-item.component.html

@@ -37,11 +37,20 @@
   </div>
 </div>
 
-@if (quantityControl.maxQuantity() < 2 && !isDownload()) {
-  <div
-    class="text-isa-accent-red isa-text-body-2-bold flex flex-row items-center gap-2"
-  >
-    <ng-icon name="isaOtherInfo" size="1.5rem"></ng-icon>
-    <div>Geringer Bestand - Artikel holen vor Abschluss</div>
-  </div>
+@if (!isDownload()) {
+  @if (showLowStockMessage()) {
+    <div
+      class="text-isa-accent-red isa-text-body-2-bold flex flex-row items-center gap-2"
+    >
+      <ng-icon name="isaOtherInfo" size="1.5rem"></ng-icon>
+      <div>{{ inStock() }} Exemplare sofort lieferbar</div>
+    </div>
+  } @else if (quantityControl.maxQuantity() < 2) {
+    <div
+      class="text-isa-accent-red isa-text-body-2-bold flex flex-row items-center gap-2"
+    >
+      <ng-icon name="isaOtherInfo" size="1.5rem"></ng-icon>
+      <div>Geringer Bestand - Artikel holen vor Abschluss</div>
+    </div>
+  }
 }

libs/checkout/feature/reward-shopping-cart/src/lib/reward-shopping-cart-item/reward-shopping-cart-item.component.ts

@@ -72,9 +72,20 @@ export class RewardShoppingCartItemComponent {
     hasOrderTypeFeature(this.item().features, ['Download']),
   );
 
+  isAbholung = computed(() =>
+    hasOrderTypeFeature(this.item().features, ['Abholung']),
+  );
+
+  inStock = computed(() => this.item().availability?.inStock ?? 0);
+
+  showLowStockMessage = computed(() => {
+    return this.isAbholung() && this.inStock() < 2;
+  });
+
   async updatePurchaseOption() {
     const shoppingCartItemId = this.itemId();
     const shoppingCartId = this.shoppingCartId();
+    const branch = this.item().destination?.data?.targetBranch?.data;
 
     if (this.isBusy() || !shoppingCartId || !shoppingCartItemId) {
       return;
@@ -90,6 +101,8 @@ export class RewardShoppingCartItemComponent {
         useRedemptionPoints: true,
         disabledPurchaseOptions: ['b2b-delivery'],
         hideDisabledPurchaseOptions: true,
+        pickupBranch: branch,
+        inStoreBranch: branch,
       });
 
       await firstValueFrom(ref.afterClosed$);

libs/checkout/shared/reward-selection-dialog/src/lib/reward-selection-dialog/reward-selection-error/reward-selection-error.component.css

@@ -1,3 +1,3 @@
 :host {
-  @apply text-isa-accent-red isa-text-body-2-bold flex flex-row gap-2 items-center;
+  @apply text-isa-accent-red isa-text-body-2-bold flex flex-col gap-2 items-start;
 }

libs/checkout/shared/reward-selection-dialog/src/lib/reward-selection-dialog/reward-selection-error/reward-selection-error.component.html

@@ -1,8 +1,10 @@
 @if (store.totalLoyaltyPointsNeeded() > store.customerRewardPoints()) {
-  <ng-icon
-    class="w-6 h-6 inline-flex items-center justify-center"
-    size="1.5rem"
-    name="isaOtherInfo"
-  ></ng-icon>
-  <span>Lesepunkte reichen nicht für alle Artikel</span>
+  <div class="flex flex-row gap-2 items-center">
+    <ng-icon
+      class="w-6 h-6 inline-flex items-center justify-center"
+      size="1.5rem"
+      name="isaOtherInfo"
+    ></ng-icon>
+    <span>Lesepunkte reichen nicht für alle Artikel</span>
+  </div>
 }

libs/checkout/shared/reward-selection-dialog/src/lib/reward-selection-dialog/reward-selection-items/reward-selection-item/reward-selection-inputs/reward-selection-inputs.component.ts

@@ -41,10 +41,7 @@ export class RewardSelectionInputsComponent {
 
   hasCorrectOrderType = computed(() => {
     const item = this.rewardSelectionItem().item;
-    return hasOrderTypeFeature(item.features, [
-      OrderTypeFeature.InStore,
-      OrderTypeFeature.Pickup,
-    ]);
+    return hasOrderTypeFeature(item.features, [OrderTypeFeature.InStore]);
   });
 
   hasStock = computed(() => {

libs/checkout/shared/reward-selection-dialog/src/lib/reward-selection-dialog/reward-selection-items/reward-selection-item/reward-selection-item.component.html

@@ -27,3 +27,16 @@
 
   <lib-reward-selection-inputs></lib-reward-selection-inputs>
 </div>
+
+@if (showLowStockMessage()) {
+  <div
+    class="flex flex-row gap-2 items-center text-isa-accent-red isa-text-body-2-bold"
+  >
+    <ng-icon
+      class="w-6 h-6 inline-flex items-center justify-center"
+      size="1.5rem"
+      name="isaOtherInfo"
+    ></ng-icon>
+    <span>{{ inStock() }} Exemplare sofort lieferbar</span>
+  </div>
+}

libs/checkout/shared/reward-selection-dialog/src/lib/reward-selection-dialog/reward-selection-items/reward-selection-item/reward-selection-item.component.ts

@@ -1,8 +1,18 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+} from '@angular/core';
 import { ProductImageDirective } from '@isa/shared/product-image';
 import { ProductRouterLinkDirective } from '@isa/shared/product-router-link';
 import { RewardSelectionInputsComponent } from './reward-selection-inputs/reward-selection-inputs.component';
-import { RewardSelectionItem } from '@isa/checkout/data-access';
+import {
+  hasOrderTypeFeature,
+  RewardSelectionItem,
+} from '@isa/checkout/data-access';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { isaOtherInfo } from '@isa/icons';
 
 @Component({
   selector: 'lib-reward-selection-item',
@@ -13,8 +23,24 @@ import { RewardSelectionItem } from '@isa/checkout/data-access';
     ProductImageDirective,
     ProductRouterLinkDirective,
     RewardSelectionInputsComponent,
+    NgIcon,
   ],
+  providers: [provideIcons({ isaOtherInfo })],
 })
 export class RewardSelectionItemComponent {
   rewardSelectionItem = input.required<RewardSelectionItem>();
+
+  inStock = computed(
+    () => this.rewardSelectionItem().item?.availability?.inStock ?? 0,
+  );
+
+  isAbholung = computed(() =>
+    hasOrderTypeFeature(this.rewardSelectionItem()?.item?.features, [
+      'Abholung',
+    ]),
+  );
+
+  showLowStockMessage = computed(() => {
+    return this.isAbholung() && this.inStock() < 2;
+  });
 }

libs/common/data-access/src/lib/operators/catch-response-args-error.ts

@@ -34,8 +34,15 @@ export const catchResponseArgsErrorPipe = <T>(): OperatorFunction<T, T> =>
       return throwError(() => err);
     }),
     mergeMap((response) => {
-      if (isResponseArgs(response) && response.error === true) {
-        return throwError(() => new ResponseArgsError(response));
+      if (isResponseArgs(response)) {
+        // Treat as error if error flag is true OR if invalidProperties has entries
+        const hasInvalidProps =
+          response.invalidProperties &&
+          Object.keys(response.invalidProperties).length > 0;
+
+        if (response.error === true || hasInvalidProps) {
+          return throwError(() => new ResponseArgsError(response));
+        }
       }
 
       return [response];

libs/crm/data-access/src/lib/resources/customer-bon-check.resource.ts

@@ -2,6 +2,7 @@ import { Injectable, inject, resource, signal, computed } from '@angular/core';
 import { logger } from '@isa/core/logging';
 import { CustomerBonRedemptionFacade } from '../facades/customer-bon-redemption.facade';
 import { LoyaltyBonResponse } from '@generated/swagger/crm-api';
+import { ResponseArgsError } from '@isa/common/data-access';
 
 /**
  * Resource for checking/validating Bon numbers.
@@ -47,8 +48,24 @@ export class CustomerBonCheckResource {
       this.#logger.debug('Bon checked', () => ({
         bonNr,
         found: !!response?.result,
+        hasInvalidProperties:
+          !!response?.invalidProperties &&
+          Object.keys(response.invalidProperties).length > 0,
       }));
 
+      // Check for invalidProperties even when error is false
+      // Backend may return { error: false, invalidProperties: {...} } for validation issues
+      if (
+        response?.invalidProperties &&
+        Object.keys(response.invalidProperties).length > 0
+      ) {
+        this.#logger.warn('Bon check has invalid properties', () => ({
+          bonNr,
+          invalidProperties: response.invalidProperties,
+        }));
+        throw new ResponseArgsError(response);
+      }
+
       return response?.result;
     },
     defaultValue: undefined,

libs/crm/data-access/src/lib/services/crm-search.service.ts

@@ -224,15 +224,10 @@ export class CrmSearchService {
       req$ = req$.pipe(takeUntilAborted(abortSignal));
     }
 
-    try {
-      const res = await firstValueFrom(req$);
-      this.#logger.debug('Successfully fetched current booking partner store');
+    const res = await firstValueFrom(req$);
+    this.#logger.debug('Successfully fetched current booking partner store');
 
-      return res?.result;
-    } catch (error) {
-      this.#logger.error('Error fetching current booking partner store', error);
-      return undefined;
-    }
+    return res?.result;
   }
 
   async addBooking(

libs/crm/feature/customer-bon-redemption/src/lib/crm-feature-customer-bon-redemption/crm-feature-customer-bon-redemption.component.ts

@@ -114,12 +114,7 @@ export class CrmFeatureCustomerBonRedemptionComponent {
       }
       // Handle API errors
       else if (error) {
-        let errorMsg = 'Bon-Validierung fehlgeschlagen';
-        if (error instanceof ResponseArgsError) {
-          errorMsg = error.message || errorMsg;
-        } else if (error instanceof Error) {
-          errorMsg = error.message;
-        }
+        const errorMsg = this.#extractErrorMessage(error);
         this.store.setError(errorMsg);
       }
     });
@@ -224,4 +219,23 @@ export class CrmFeatureCustomerBonRedemptionComponent {
     this.store.reset();
     this.#bonCheckResource.reset();
   }
+
+  /**
+   * Extract error message from various error types.
+   * ResponseArgsError already formats invalidProperties into a readable message.
+   */
+  #extractErrorMessage(error: unknown): string {
+    const defaultMsg = 'Bon-Validierung fehlgeschlagen';
+    const actualError = (error as { cause?: unknown })?.cause ?? error;
+
+    if (actualError instanceof ResponseArgsError) {
+      return actualError.message || defaultMsg;
+    }
+
+    if (actualError instanceof Error) {
+      return actualError.message || defaultMsg;
+    }
+
+    return defaultMsg;
+  }
 }

libs/remission/feature/remission-return-receipt-details/src/lib/remission-return-receipt-details.component.html

@@ -63,6 +63,18 @@
     }
   </div>
 }
+
+<button
+  type="button"
+  uiButton
+  color="tertiary"
+  size="large"
+  (click)="abortRemission()"
+  class="fixed right-[15rem] bottom-6"
+>
+  Warenbegleitschein abbrechen
+</button>
+
 @if (!returnLoading() && !returnData()?.completed) {
   <lib-remission-return-receipt-complete
     [returnId]="returnId()"

libs/remission/feature/remission-return-receipt-details/src/lib/remission-return-receipt-details.component.ts

@@ -17,6 +17,7 @@ import {
   getPackageNumbersFromReturn,
   getReceiptItemsFromReturn,
   getReceiptNumberFromReturn,
+  RemissionStore,
 } from '@isa/remission/data-access';
 import { EmptyStateComponent } from '@isa/ui/empty-state';
 import { EMPTY_WBS_DESCRIPTION, EMPTY_WBS_TITLE } from './constants';
@@ -24,6 +25,8 @@ import {
   RemissionReturnReceiptActionsComponent,
   RemissionReturnReceiptCompleteComponent,
 } from '@isa/remission/shared/return-receipt-actions';
+import { Router } from '@angular/router';
+import { injectTabId } from '@isa/core/tabs';
 
 @Component({
   selector: 'remi-remission-return-receipt-details',
@@ -53,6 +56,15 @@ export class RemissionReturnReceiptDetailsComponent {
   /** Angular Location service for navigation */
   location = inject(Location);
 
+  /** Remission store for managing remission state */
+  #store = inject(RemissionStore);
+
+  /** Angular Router for navigation */
+  #router = inject(Router);
+
+  /** Injects the current activated tab ID as a signal. */
+  #tabId = injectTabId();
+
   /**
    * Required input for the return ID.
    * Automatically coerced to a number from string input.
@@ -111,4 +123,9 @@ export class RemissionReturnReceiptDetailsComponent {
     const returnData = this.returnData();
     return getPackageNumbersFromReturn(returnData!) !== '';
   });
+
+  async abortRemission() {
+    this.#store.clearState();
+    await this.#router.navigate(['/', this.#tabId(), 'remission']);
+  }
 }

libs/shared/filter/src/lib/menus/filter-menu/filter-menu-button.component.html

@@ -20,11 +20,13 @@
   cdkConnectedOverlay
   [cdkConnectedOverlayOrigin]="trigger"
   [cdkConnectedOverlayOpen]="open()"
+  [cdkConnectedOverlayPositions]="overlayPositions"
   [cdkConnectedOverlayHasBackdrop]="true"
   cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
   [cdkConnectedOverlayScrollStrategy]="scrollStrategy"
-  [cdkConnectedOverlayOffsetX]="-10"
-  [cdkConnectedOverlayOffsetY]="18"
+  [cdkConnectedOverlayFlexibleDimensions]="true"
+  [cdkConnectedOverlayGrowAfterOpen]="true"
+  [cdkConnectedOverlayPush]="true"
   cdkConnectedOverlayWidth="18.375rem"
   (backdropClick)="toggle()"
 >

libs/shared/filter/src/lib/menus/filter-menu/filter-menu-button.component.ts

@@ -2,13 +2,13 @@ import { Overlay, OverlayModule } from '@angular/cdk/overlay';
 import {
   ChangeDetectionStrategy,
   Component,
-  computed,
   inject,
   input,
   model,
   output,
 } from '@angular/core';
 import { IconButtonComponent } from '@isa/ui/buttons';
+import { DROPDOWN_OVERLAY_POSITIONS } from '@isa/ui/layout';
 import { FilterMenuComponent } from './filter-menu.component';
 import { FilterService } from '../../core';
 
@@ -30,6 +30,9 @@ export class FilterMenuButtonComponent {
 
   selectedFilters = this.#filter.selectedFilterCount;
 
+  /** Standard overlay positions for the filter menu panel */
+  readonly overlayPositions = DROPDOWN_OVERLAY_POSITIONS;
+
   /**
    * Tracks the open state of the filter menu.
    */

libs/ui/input-controls/src/lib/dropdown/dropdown.component.html

@@ -10,7 +10,9 @@
   [cdkConnectedOverlayDisableClose]="false"
   cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
   [cdkConnectedOverlayMinWidth]="overlayMinWidth"
-  [cdkConnectedOverlayLockPosition]="true"
+  [cdkConnectedOverlayFlexibleDimensions]="true"
+  [cdkConnectedOverlayGrowAfterOpen]="true"
+  [cdkConnectedOverlayPush]="true"
   [cdkConnectedOverlayScrollStrategy]="blockScrollStrategy"
   (backdropClick)="close()"
   (detach)="isOpen.set(false)"

libs/ui/input-controls/src/lib/dropdown/dropdown.component.ts

@@ -13,9 +13,7 @@ import {
   signal,
   viewChild,
 } from '@angular/core';
-
 import { isEqual } from 'lodash';
-
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NgIconComponent, provideIcons } from '@ng-icons/core';
 import { isaActionChevronUp, isaActionChevronDown } from '@isa/icons';
@@ -23,14 +21,15 @@ import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
 import {
   CdkConnectedOverlay,
   CdkOverlayOrigin,
-  ConnectedPosition,
   ScrollStrategyOptions,
 } from '@angular/cdk/overlay';
 import { DropdownAppearance } from './dropdown.types';
 import { DropdownService } from './dropdown.service';
-import { CloseOnScrollDirective } from '@isa/ui/layout';
+import {
+  CloseOnScrollDirective,
+  DROPDOWN_OVERLAY_POSITIONS,
+} from '@isa/ui/layout';
 import { logger } from '@isa/core/logging';
-
 import { DropdownOptionComponent } from './dropdown-option.component';
 import { DropdownFilterComponent } from './dropdown-filter.component';
 import { DROPDOWN_HOST, DropdownHost } from './dropdown-host';
@@ -99,80 +98,8 @@ export class DropdownButtonComponent<T>
     return this.#scrollStrategy.block();
   }
 
-  /** Offset in pixels between the trigger and the overlay panel */
-  readonly #overlayOffset = 12;
-
-  /**
-   * Position priority for the overlay panel.
-   * Order: bottom-left, bottom-right, top-left, top-right,
-   *        right-top, right-bottom, left-top, left-bottom
-   */
-  readonly overlayPositions: ConnectedPosition[] = [
-    // Bottom left
-    {
-      originX: 'start',
-      originY: 'bottom',
-      overlayX: 'start',
-      overlayY: 'top',
-      offsetY: this.#overlayOffset,
-    },
-    // Bottom right
-    {
-      originX: 'end',
-      originY: 'bottom',
-      overlayX: 'end',
-      overlayY: 'top',
-      offsetY: this.#overlayOffset,
-    },
-    // Top left
-    {
-      originX: 'start',
-      originY: 'top',
-      overlayX: 'start',
-      overlayY: 'bottom',
-      offsetY: -this.#overlayOffset,
-    },
-    // Top right
-    {
-      originX: 'end',
-      originY: 'top',
-      overlayX: 'end',
-      overlayY: 'bottom',
-      offsetY: -this.#overlayOffset,
-    },
-    // Right top
-    {
-      originX: 'end',
-      originY: 'top',
-      overlayX: 'start',
-      overlayY: 'top',
-      offsetX: this.#overlayOffset,
-    },
-    // Right bottom
-    {
-      originX: 'end',
-      originY: 'bottom',
-      overlayX: 'start',
-      overlayY: 'bottom',
-      offsetX: this.#overlayOffset,
-    },
-    // Left top
-    {
-      originX: 'start',
-      originY: 'top',
-      overlayX: 'end',
-      overlayY: 'top',
-      offsetX: -this.#overlayOffset,
-    },
-    // Left bottom
-    {
-      originX: 'start',
-      originY: 'bottom',
-      overlayX: 'end',
-      overlayY: 'bottom',
-      offsetX: -this.#overlayOffset,
-    },
-  ];
+  /** Standard overlay positions for the dropdown panel */
+  readonly overlayPositions = DROPDOWN_OVERLAY_POSITIONS;
 
   appearance = input<DropdownAppearance>(DropdownAppearance.AccentOutline);
 

libs/ui/layout/src/index.ts

@@ -2,3 +2,4 @@ export * from './lib/breakpoint.directive';
 export * from './lib/breakpoint';
 export * from './lib/close-on-scroll.directive';
 export * from './lib/in-viewport.directive';
+export * from './lib/overlay-positions';

libs/ui/layout/src/lib/overlay-positions.ts

@@ -0,0 +1,100 @@
+import { ConnectedPosition } from '@angular/cdk/overlay';
+
+/** Default offset in pixels between the trigger and the overlay panel */
+export const OVERLAY_OFFSET = 12;
+
+/**
+ * Creates standard dropdown overlay positions with configurable offset.
+ *
+ * Position priority for overlay panels:
+ * CDK tries positions in order and picks the first one that fits in the viewport.
+ *
+ * With `flexibleDimensions=true` and `push=true`, the overlay will:
+ * 1. Try positions in order
+ * 2. Constrain size to fit in viewport (flexibleDimensions)
+ * 3. Push into viewport if needed (push)
+ *
+ * Priority order (most to least preferred):
+ * 1. Below the trigger (default, most natural for dropdowns)
+ * 2. Above the trigger (when no space below)
+ * 3. To the right (when no vertical space)
+ * 4. To the left (last resort)
+ *
+ * @param offset - Offset in pixels between trigger and overlay (default: 12)
+ * @returns Array of ConnectedPosition configurations
+ */
+export const createOverlayPositions = (
+  offset: number = OVERLAY_OFFSET,
+): ConnectedPosition[] => [
+  // Priority 1: Below trigger, left-aligned (default/preferred)
+  {
+    originX: 'start',
+    originY: 'bottom',
+    overlayX: 'start',
+    overlayY: 'top',
+    offsetY: offset,
+  },
+  // Priority 2: Below trigger, right-aligned
+  {
+    originX: 'end',
+    originY: 'bottom',
+    overlayX: 'end',
+    overlayY: 'top',
+    offsetY: offset,
+  },
+  // Priority 3: Above trigger, left-aligned
+  {
+    originX: 'start',
+    originY: 'top',
+    overlayX: 'start',
+    overlayY: 'bottom',
+    offsetY: -offset,
+  },
+  // Priority 4: Above trigger, right-aligned
+  {
+    originX: 'end',
+    originY: 'top',
+    overlayX: 'end',
+    overlayY: 'bottom',
+    offsetY: -offset,
+  },
+  // Priority 5: Right of trigger, top-aligned
+  {
+    originX: 'end',
+    originY: 'top',
+    overlayX: 'start',
+    overlayY: 'top',
+    offsetX: offset,
+  },
+  // Priority 6: Right of trigger, bottom-aligned
+  {
+    originX: 'end',
+    originY: 'bottom',
+    overlayX: 'start',
+    overlayY: 'bottom',
+    offsetX: offset,
+  },
+  // Priority 7: Left of trigger, top-aligned
+  {
+    originX: 'start',
+    originY: 'top',
+    overlayX: 'end',
+    overlayY: 'top',
+    offsetX: -offset,
+  },
+  // Priority 8: Left of trigger, bottom-aligned
+  {
+    originX: 'start',
+    originY: 'bottom',
+    overlayX: 'end',
+    overlayY: 'bottom',
+    offsetX: -offset,
+  },
+];
+
+/**
+ * Standard dropdown overlay positions with default offset (12px).
+ * Use this for most dropdown/menu components.
+ */
+export const DROPDOWN_OVERLAY_POSITIONS: ConnectedPosition[] =
+  createOverlayPositions(OVERLAY_OFFSET);