#4615 Tracking Link Update Customer Orders

apps/page/customer-order/src/lib/customer-order-details/customer-order-details-item/customer-order-details-item.component.html

@@ -140,9 +140,18 @@
           </ng-container>
         </ng-template>
       </div>
-      <div class="detail" *ngIf="getOrderItemTrackingNumber(orderItem); let trackingNumber">
-        <div class="label">Sendungsnummer</div>
-        <a class="value text-[#0556B4]" [href]="getTrackingNumberLink(trackingNumber)" target="_blank">{{ trackingNumber }}</a>
+      <div class="page-customer-order-details-item__tracking-details" *ngIf="getOrderItemTrackingData(orderItem); let trackingData">
+        <div class="label">{{ trackingData.length > 1 ? 'Sendungsnummern' : 'Sendungsnummer' }}</div>
+        <ng-container *ngFor="let tracking of trackingData">
+          <ng-container *ngIf="tracking.trackingProvider === 'DHL' && !isNative; else noTrackingLink">
+            <a class="value text-[#0556B4]" [href]="getTrackingNumberLink(tracking.trackingNumber)" target="_blank"
+              >{{ tracking.trackingProvider }}: {{ tracking.trackingNumber }}</a
+            >
+          </ng-container>
+          <ng-template #noTrackingLink>
+            <p class="value">{{ tracking.trackingProvider }}: {{ tracking.trackingNumber }}</p>
+          </ng-template>
+        </ng-container>
       </div>
 
       <hr class="border-[#EDEFF0] border-t-2 my-4" />

apps/page/customer-order/src/lib/customer-order-details/customer-order-details-item/customer-order-details-item.component.scss

@@ -55,6 +55,18 @@ button {
   }
 }
 
+.page-customer-order-details-item__tracking-details {
+  @apply flex gap-x-7;
+
+  .label {
+    @apply w-[8.125rem];
+  }
+
+  .value {
+    @apply flex flex-row items-center font-bold;
+  }
+}
+
 .page-customer-order-details-item__comment {
   textarea {
     @apply w-full flex-grow rounded bg-[#EDEFF0] border-[#AEB7C1] border border-solid outline-none text-p2 p-4;

apps/page/customer-order/src/lib/customer-order-details/customer-order-details-item/customer-order-details-item.component.ts

@@ -18,6 +18,7 @@ import { isEqual } from 'lodash';
 import { combineLatest, NEVER, Subject, Observable } from 'rxjs';
 import { catchError, filter, first, map, switchMap, withLatestFrom } from 'rxjs/operators';
 import { CustomerOrderDetailsStore } from '../customer-order-details.store';
+import { EnvironmentService } from '@core/environment';
 
 export interface CustomerOrderDetailsItemComponentState {
   orderItem?: OrderItemListItemDTO;
@@ -142,11 +143,16 @@ export class CustomerOrderDetailsItemComponent extends ComponentStore<CustomerOr
 
   private _onDestroy$ = new Subject();
 
+  get isNative() {
+    return this._environment.isNative();
+  }
+
   constructor(
     private _store: CustomerOrderDetailsStore,
     private _domainReceiptService: DomainReceiptService,
     private _omsService: DomainOmsService,
-    private _cdr: ChangeDetectorRef
+    private _cdr: ChangeDetectorRef,
+    private _environment: EnvironmentService
   ) {
     super({
       more: false,
@@ -231,11 +237,29 @@ export class CustomerOrderDetailsItemComponent extends ComponentStore<CustomerOr
     return orderItems?.find((orderItem) => orderItem.data.id === orderItemListItem.orderItemId)?.data?.features?.orderType;
   }
 
-  getOrderItemTrackingNumber(orderItemListItem: OrderItemListItemDTO): string {
+  getOrderItemTrackingData(orderItemListItem: OrderItemListItemDTO): Array<{ trackingProvider: string; trackingNumber: string }> {
     const orderItems = this.order?.items;
-    return orderItems
+    const completeTrackingInformation = orderItems
       ?.find((orderItem) => orderItem.data.id === orderItemListItem.orderItemId)
       ?.data?.subsetItems?.find((subsetItem) => subsetItem.id === orderItemListItem.orderItemSubsetId)?.data?.trackingNumber;
+
+    if (!completeTrackingInformation) {
+      return;
+    }
+
+    // Beispielnummer: 'DHL: 124124' - Bei mehreren Tracking-Informationen muss noch ein Splitter eingebaut werden, je nach dem welcher Trenner verwendet wird
+    const trackingInformationPairs = completeTrackingInformation.split(':').map((obj) => obj.trim());
+    return this._trackingTransformationHelper(trackingInformationPairs);
+  }
+
+  // Macht aus einem String Array ein Array von Objekten mit den keys trackingProvider und trackingNumber
+  private _trackingTransformationHelper(trackingInformationPairs: string[]): Array<{ trackingProvider: string; trackingNumber: string }> {
+    return trackingInformationPairs.reduce((acc, current, index, array) => {
+      if (index % 2 === 0) {
+        acc.push({ trackingProvider: current, trackingNumber: array[index + 1] });
+      }
+      return acc;
+    }, [] as { trackingProvider: string; trackingNumber: string }[]);
   }
 
   getTrackingNumberLink(trackingNumber: string) {