#4543 Styling Fix Checkout Review for multiple Destinations per OrderType

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

@@ -81,8 +81,11 @@
             *ngIf="group?.orderType !== undefined && (item.features?.orderType === 'Abholung' || item.features?.orderType === 'Rücklage')"
           >
             <ng-container *ngIf="item?.destination?.data?.targetBranch?.data; let targetBranch">
-              <ng-container *ngIf="i === 0 || targetBranch.id !== group.items[i - 1].destination?.data?.targetBranch?.data.id">
-                <div class="flex flex-row items-center px-5 pt-0 pb-[0.875rem] -mt-2 bg-[#F5F7FA]">
+              <ng-container *ngIf="i === 0 || checkIfMultipleDestinationsForOrderTypeExist(targetBranch, group, i)">
+                <div
+                  class="flex flex-row items-center px-5 pt-0 pb-[0.875rem] -mt-2 bg-[#F5F7FA]"
+                  [class.multiple-destinations]="checkIfMultipleDestinationsForOrderTypeExist(targetBranch, group, i)"
+                >
                   <span class="branch-name">{{ targetBranch?.name }} | {{ targetBranch | branchAddress }}</span>
                 </div>
                 <hr />

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

@@ -105,6 +105,10 @@ h1 {
   }
 }
 
+.multiple-destinations {
+  @apply py-[0.875rem] mt-0;
+}
+
 .icon-order-type {
   @apply text-black mr-2;
 }

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

@@ -14,7 +14,7 @@ import { Router } from '@angular/router';
 import { ApplicationService } from '@core/application';
 import { DomainAvailabilityService } from '@domain/availability';
 import { DomainCheckoutService } from '@domain/checkout';
-import { AvailabilityDTO, DestinationDTO, ShoppingCartItemDTO } from '@swagger/checkout';
+import { AvailabilityDTO, BranchDTO, DestinationDTO, ShoppingCartItemDTO } from '@swagger/checkout';
 import { UiMessageModalComponent, UiModalService } from '@ui/modal';
 import { PrintModalData, PrintModalComponent } from '@modal/printer';
 import { delay, first, map, switchMap, takeUntil, tap } from 'rxjs/operators';
@@ -254,6 +254,10 @@ export class CheckoutReviewComponent implements OnInit, OnDestroy, AfterViewInit
       });
   }
 
+  checkIfMultipleDestinationsForOrderTypeExist(targetBranch: BranchDTO, group: { items: ShoppingCartItemDTO[] }, i: number) {
+    return i === 0 ? false : targetBranch.id !== group.items[i - 1].destination?.data?.targetBranch?.data.id;
+  }
+
   async refreshAvailabilities() {
     this.checkingOla$.next(true);