Init Pickup Shelf Out Details Page and startet Header Implementation

2025-12-28 22:42:11 +01:00 · 2023-09-26 17:30:28 +02:00
parent ce0823a6fd
commit 299dab43b9
9 changed files with 701 additions and 6 deletions
--- a/apps/page/pickup-shelf/src/lib/pickup-shelf-out/pickup-shelf-out-details/pickup-shelf-out-details.component.css
+++ b/apps/page/pickup-shelf/src/lib/pickup-shelf-out/pickup-shelf-out-details/pickup-shelf-out-details.component.css
@@ -1,3 +1,25 @@
 :host {
  @apply box-border grid overflow-y-scroll h-split-screen-tablet desktop-small:h-split-screen-desktop;
 }
+
+.page-pickup-shelf-out-details__action-wrapper {
+  @apply sticky bottom-4 mt-4 text-center;
+}
+.cta-action {
+  @apply border-2 border-solid border-brand rounded-full py-3 px-6 font-bold text-lg outline-none self-end whitespace-nowrap m-2;
+}
+
+.fetching {
+  @apply bg-inactive-branch;
+}
+
+.cta-action-primary {
+  @apply bg-brand text-white;
+}
+
+.cta-action-secondary {
+  @apply bg-white text-brand;
+}
+button:disabled {
+  @apply bg-inactive-customer border-inactive-customer text-white cursor-not-allowed;
+}
--- a/apps/page/pickup-shelf/src/lib/pickup-shelf-out/pickup-shelf-out-details/pickup-shelf-out-details.component.html
+++ b/apps/page/pickup-shelf/src/lib/pickup-shelf-out/pickup-shelf-out-details/pickup-shelf-out-details.component.html
@@ -1,3 +1,43 @@
-<h1>Details</h1>
-<pre class="text-slate-700">{{ order$ | async | json }}</pre>
-<pre class="text-blue-800">{{ orderItems$ | async | json }}</pre>
+<div class="mb-4">
+  <!-- <page-pickup-shelf-details-header
+      (editClick)="navigateToEditPage($event)"
+      (handleAction)="handleAction($event)"
+      [order]="order$ | async"
+    ></page-pickup-shelf-details-header> -->
+  <page-pickup-shelf-details-header [order]="order$ | async"></page-pickup-shelf-details-header>
+  <!-- <page-customer-order-details-item
+      class="mb-px-2"
+      *ngFor="let item of items$ | async"
+      [orderItem]="item"
+      [order]="order$ | async"
+      [selected]="true"
+      (historyClick)="navigateToHistoryPage($event)"
+      (specialCommentChanged)="updateCustomerOrderResults()"
+    ></page-customer-order-details-item>
+    <page-customer-order-details-tags *ngIf="showTagsComponent$ | async"></page-customer-order-details-tags>
+  </div>
+  <div class="page-pickup-shelf-out-details__action-wrapper">
+    <button
+      [disabled]="addToPreviousCompartmentActionDisabled$ | async"
+      *ngIf="addToPreviousCompartmentAction$ | async; let action"
+      class="cta-action shadow-action"
+      [class.cta-action-primary]="action.selected"
+      [class.cta-action-secondary]="!action.selected"
+      (click)="handleAction(action, { compartmentCode: latestCompartmentCode, compartmentInfo: latestCompartmentInfo })"
+    >
+      <ui-spinner [show]="(changeActionLoader$ | async) === action.command"
+        >{{ latestCompartmentCode$ | async | addToPreviousCompartmentCodeLabelPipe }} zubuchen</ui-spinner
+      >
+    </button>
+  
+    <button
+      [disabled]="actionsDisabled$ | async"
+      class="cta-action shadow-action"
+      [class.cta-action-primary]="action.selected"
+      [class.cta-action-secondary]="!action.selected"
+      *ngFor="let action of mainActions$ | async"
+      (click)="handleAction(action)"
+    >
+      <ui-spinner [show]="(changeActionLoader$ | async) === action.command">{{ action.label }}</ui-spinner>
+    </button> -->
+</div>
--- a/apps/page/pickup-shelf/src/lib/pickup-shelf-out/pickup-shelf-out-details/pickup-shelf-out-details.component.ts
+++ b/apps/page/pickup-shelf/src/lib/pickup-shelf-out/pickup-shelf-out-details/pickup-shelf-out-details.component.ts
@@ -1,6 +1,7 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { PickupShelfDetailsBaseComponent } from '../../pickup-shelf-details-base.component';
-import { AsyncPipe, JsonPipe } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
+import { PickUpShelfDetailsHeaderComponent } from '../../shared/pickup-shelf-details-header/pickup-shelf-details-header.component';

@Component({
  selector: 'page-pickup-shelf-out-details',
@@ -9,7 +10,7 @@ import { AsyncPipe, JsonPipe } from '@angular/common';
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: { class: 'page-pickup-shelf-out-details' },
  standalone: true,
-  imports: [AsyncPipe, JsonPipe],
+  imports: [AsyncPipe, PickUpShelfDetailsHeaderComponent],
  providers: [],
 })
 export class PickupShelfOutDetailsComponent extends PickupShelfDetailsBaseComponent {
--- a/apps/page/pickup-shelf/src/lib/shared/pickup-shelf-details-header/pickup-shelf-details-header.component.html
+++ b/apps/page/pickup-shelf/src/lib/shared/pickup-shelf-details-header/pickup-shelf-details-header.component.html
@@ -0,0 +1,346 @@
+<ng-container *ngIf="orderItem$ | async; let orderItem">
+  <div class="grid grid-flow-row gap-px-2">
+    <div class="bg-[#F5F7FA] flex flex-row justify-between items-center p-4 rounded-t">
+      <div class="grid grid-flow-col gap-[0.4375rem] items-center" *ngIf="features$ | async; let features; else: featureLoading">
+        <shared-icon *ngIf="features?.length > 0" [size]="24" icon="person"></shared-icon>
+        <div class="grid grid-flow-col gap-2 items-center font-bold text-p2" *ngFor="let feature of features">
+          {{ feature?.description }}
+        </div>
+      </div>
+
+      <button
+        [disabled]="editButtonDisabled$ | async"
+        class="page-pickup-shelf-details-header__edit-cta bg-transparent text-brand font-bold border-none text-p1"
+        *ngIf="editClick.observers.length"
+        (click)="editClick.emit(orderItem)"
+      >
+        Bearbeiten
+      </button>
+    </div>
+
+    <div class="page-pickup-shelf-details-header__details bg-white px-4 pt-4 pb-5">
+      <h2 class="page-pickup-shelf-details-header__details-header items-center" [class.mb-8]="!orderItem?.features?.paid && !isKulturpass">
+        <div class="text-h2">
+          {{ orderItem?.organisation }}
+          <ng-container *ngIf="!!orderItem?.organisation && (!!orderItem?.firstName || !!orderItem?.lastName)"> - </ng-container>
+          {{ orderItem?.lastName }}
+          {{ orderItem?.firstName }}
+        </div>
+        <div class="page-pickup-shelf-details-header__header-compartment text-h3">
+          {{ orderItem?.compartmentCode }}{{ orderItem?.compartmentInfo && '_' + orderItem?.compartmentInfo }}
+        </div>
+      </h2>
+
+      <div class="page-pickup-shelf-details-header__paid-marker mt-[0.375rem]" *ngIf="orderItem?.features?.paid && !isKulturpass">
+        <div class="font-bold w-fit desktop-small:text-p2 px-3 py-[0.125rem] rounded text-white bg-[#26830C]">
+          {{ orderItem?.features?.paid }}
+        </div>
+      </div>
+      <div class="page-pickup-shelf-details-header__paid-marker mt-[0.375rem] text-[#26830C]" *ngIf="isKulturpass">
+        <svg class="fill-current mr-2" xmlns="http://www.w3.org/2000/svg" height="22" viewBox="0 -960 960 960" width="22">
+          <path
+            d="M880-740v520q0 24-18 42t-42 18H140q-24 0-42-18t-18-42v-520q0-24 18-42t42-18h680q24 0 42 18t18 42ZM140-631h680v-109H140v109Zm0 129v282h680v-282H140Zm0 282v-520 520Z"
+          />
+        </svg>
+        <strong> Bezahlt über KulturPass </strong>
+      </div>
+
+      <div class="page-pickup-shelf-details-header__details-wrapper -mt-3">
+        <div class="flex flex-row page-pickup-shelf-details-header__buyer-number" data-detail-id="Kundennummer">
+          <div class="min-w-[9rem]">Kundennummer</div>
+          <div class="flex flex-row font-bold">{{ orderItem?.buyerNumber }}</div>
+        </div>
+        <div class="flex flex-row page-pickup-shelf-details-header__order-number" data-detail-id="VorgangId">
+          <div class="min-w-[9rem]">Vorgang-ID</div>
+          <div class="flex flex-row font-bold">{{ orderItem?.orderNumber }}</div>
+        </div>
+        <div class="flex flex-row page-pickup-shelf-details-header__order-date" data-detail-id="Bestelldatum">
+          <div class="min-w-[9rem]">Bestelldatum</div>
+          <div class="flex flex-row font-bold">{{ orderItem?.orderDate | date: 'dd.MM.yy | HH:mm' }} Uhr</div>
+        </div>
+        <!-- <div class="flex flex-row page-pickup-shelf-details-header__processing-status justify-between" data-detail-id="Status">
+            <div class="min-w-[9rem]">Status</div>
+            <div *ngIf="!(changeStatusLoader$ | async)" class="flex flex-row font-bold -mr-[0.125rem]">
+              <shared-icon
+                class="mr-2 text-black flex items-center justify-center"
+                [size]="16"
+                *ngIf="orderItem.processingStatus | processingStatus: 'icon'; let icon"
+                [icon]="icon"
+              ></shared-icon>
+  
+              <span *ngIf="!(canEditStatus$ | async)">
+                {{ orderItem?.processingStatus | processingStatus }}
+              </span>
+              <ng-container *ngIf="canEditStatus$ | async">
+                <button
+                  class="cta-status-dropdown"
+                  [uiOverlayTrigger]="statusDropdown"
+                  [disabled]="changeStatusDisabled$ | async"
+                  #dropdown="uiOverlayTrigger"
+                >
+                  <div class="mr-[0.375rem]">
+                    {{ orderItem?.processingStatus | processingStatus }}
+                  </div>
+                  <shared-icon
+                    [size]="24"
+                    [class.rotate-0]="!dropdown.opened"
+                    [class.-rotate-180]="dropdown.opened"
+                    icon="arrow-drop-down"
+                  ></shared-icon>
+                </button>
+                <ui-dropdown #statusDropdown yPosition="below" xPosition="after" [xOffset]="8">
+                  <button uiDropdownItem *ngFor="let action of statusActions$ | async" (click)="handleActionClick(action)">
+                    {{ action.label }}
+                  </button>
+                </ui-dropdown>
+              </ng-container>
+            </div>
+            <ui-spinner *ngIf="changeStatusLoader$ | async; let loader" class="flex flex-row font-bold loader" [show]="loader"></ui-spinner>
+          </div> -->
+        <div class="flex flex-row page-pickup-shelf-details-header__order-source" data-detail-id="Bestellkanal">
+          <div class="min-w-[9rem]">Bestellkanal</div>
+          <div class="flex flex-row font-bold">{{ order?.features?.orderSource }}</div>
+        </div>
+        <div
+          class="flex flex-row page-pickup-shelf-details-header__change-date justify-between"
+          [ngSwitch]="orderItem.processingStatus"
+          data-detail-id="Geaendert"
+        >
+          <!-- orderType 1 === Abholung / Rücklage; orderType 2 === Versand / B2B-Versand; orderType 4 === Download (ist manchmal auch orderType 2) -->
+          <ng-container *ngIf="orderItem.orderType === 1; else changeDate">
+            <!-- <ng-container *ngSwitchCase="16">
+              <ng-container *ngTemplateOutlet="vslLieferdatum"></ng-container>
+            </ng-container>
+            <ng-container *ngSwitchCase="8192">
+              <ng-container *ngTemplateOutlet="vslLieferdatum"></ng-container>
+            </ng-container>
+            <ng-container *ngSwitchCase="128">
+              <ng-container *ngTemplateOutlet="abholfrist"></ng-container>
+            </ng-container> -->
+          </ng-container>
+
+          <ng-template #changeDate>
+            <div class="min-w-[9rem]">Geändert</div>
+            <div class="flex flex-row font-bold">{{ orderItem?.processingStatusDate | date: 'dd.MM.yy | HH:mm' }} Uhr</div>
+          </ng-template>
+        </div>
+
+        <div
+          class="flex flex-row page-pickup-shelf-details-header__pick-up justify-between"
+          data-detail-id="Wunschdatum"
+          *ngIf="orderItem.orderType === 1 && (orderItem.processingStatus === 16 || orderItem.processingStatus === 8192)"
+        >
+          <!-- <ng-container *ngTemplateOutlet="preferredPickUpDate"></ng-container> -->
+        </div>
+
+        <div class="flex flex-col page-pickup-shelf-details-header__dig-and-notification">
+          <div
+            *ngIf="orderItem.orderType === 1"
+            class="flex flex-row page-pickup-shelf-details-header__notification"
+            data-detail-id="Benachrichtigung"
+          >
+            <div class="min-w-[9rem]">Benachrichtigung</div>
+            <div class="flex flex-row font-bold">{{ (notificationsChannel | notificationsChannel) || '-' }}</div>
+          </div>
+
+          <div
+            *ngIf="!!digOrderNumber && orderItem.orderType !== 1"
+            class="flex flex-row page-pickup-shelf-details-header__dig-number"
+            data-detail-id="Dig-Bestellnummer"
+          >
+            <div class="min-w-[9rem]">Dig-Bestell Nr.</div>
+            <div class="flex flex-row font-bold">{{ digOrderNumber }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex flex-row items-center relative bg-[#F5F7FA] p-4 rounded-t">
+      <div *ngIf="showFeature" class="flex flex-row items-center mr-3">
+        <ng-container [ngSwitch]="order.features.orderType">
+          <ng-container *ngSwitchCase="'Versand'">
+            <div class="flex items-center justify-center bg-[#D8DFE5] w-[2.25rem] h-[2.25rem] rounded rounded-br-none mr-2">
+              <shared-icon [size]="24" icon="isa-truck"></shared-icon>
+            </div>
+            <p class="font-bold text-p1">Versand</p>
+          </ng-container>
+          <ng-container *ngSwitchCase="'DIG-Versand'">
+            <div class="flex items-center justify-center bg-[#D8DFE5] w-[2.25rem] h-[2.25rem] rounded rounded-br-none mr-2">
+              <shared-icon [size]="24" icon="isa-truck"></shared-icon>
+            </div>
+            <p class="font-bold text-p1">Versand</p>
+          </ng-container>
+          <ng-container *ngSwitchCase="'B2B-Versand'">
+            <div class="flex items-center justify-center bg-[#D8DFE5] w-[2.25rem] h-[2.25rem] rounded rounded-br-none mr-2">
+              <shared-icon [size]="24" icon="isa-b2b-truck"></shared-icon>
+            </div>
+            <p class="font-bold text-p1">B2B-Versand</p>
+          </ng-container>
+          <ng-container *ngSwitchCase="'Abholung'">
+            <div class="flex items-center justify-center bg-[#D8DFE5] w-[2.25rem] h-[2.25rem] rounded rounded-br-none mr-2">
+              <shared-icon [size]="24" icon="isa-box-out"></shared-icon>
+            </div>
+            <p class="font-bold text-p1 mr-3">Abholung</p>
+            {{ orderItem.targetBranch }}
+          </ng-container>
+          <ng-container *ngSwitchCase="'Rücklage'">
+            <div class="flex items-center justify-center bg-[#D8DFE5] w-[2.25rem] h-[2.25rem] rounded rounded-br-none mr-2">
+              <shared-icon [size]="24" icon="isa-shopping-bag"></shared-icon>
+            </div>
+            <p class="font-bold text-p1">Rücklage</p>
+          </ng-container>
+          <ng-container *ngSwitchCase="'Download'">
+            <div class="flex items-center justify-center bg-[#D8DFE5] w-[2.25rem] h-[2.25rem] rounded rounded-br-none mr-2">
+              <shared-icon [size]="24" icon="isa-download"></shared-icon>
+            </div>
+            <p class="font-bold text-p1">Download</p>
+          </ng-container>
+        </ng-container>
+      </div>
+
+      <div class="page-pickup-shelf-details-header__additional-addresses" *ngIf="showAddresses">
+        <button (click)="openAddresses = !openAddresses" class="text-[#0556B4]">
+          Lieferadresse / Rechnungsadresse {{ openAddresses ? 'ausblenden' : 'anzeigen' }}
+        </button>
+
+        <div class="page-pickup-shelf-details-header__addresses-popover" *ngIf="openAddresses">
+          <button (click)="openAddresses = !openAddresses" class="close">
+            <shared-icon icon="close" [size]="24"></shared-icon>
+          </button>
+
+          <div class="page-pickup-shelf-details-header__addresses-popover-data">
+            <div *ngIf="order.shipping" class="page-pickup-shelf-details-header__addresses-popover-delivery">
+              <p>Lieferadresse</p>
+              <div class="page-pickup-shelf-details-header__addresses-popover-delivery-data">
+                <ng-container *ngIf="order.shipping?.data?.organisation">
+                  <p>{{ order.shipping?.data?.organisation?.name }}</p>
+                  <p>{{ order.shipping?.data?.organisation?.department }}</p>
+                </ng-container>
+                <p>{{ order.shipping?.data?.firstName }} {{ order.shipping?.data?.lastName }}</p>
+                <p>{{ order.shipping?.data?.address?.info }}</p>
+                <p>{{ order.shipping?.data?.address?.street }} {{ order.shipping?.data?.address?.streetNumber }}</p>
+                <p>{{ order.shipping?.data?.address?.zipCode }} {{ order.shipping?.data?.address?.city }}</p>
+              </div>
+            </div>
+            <div *ngIf="order.billing" class="page-pickup-shelf-details-header__addresses-popover-billing">
+              <p>Rechnungsadresse</p>
+              <div class="page-pickup-shelf-details-header__addresses-popover-billing-data">
+                <ng-container *ngIf="order.billing?.data?.organisation">
+                  <p>{{ order.billing?.data?.organisation?.name }}</p>
+                  <p>{{ order.billing?.data?.organisation?.department }}</p>
+                </ng-container>
+                <p>{{ order.billing?.data?.firstName }} {{ order.billing?.data?.lastName }}</p>
+                <p>{{ order.billing?.data?.address?.info }}</p>
+                <p>{{ order.billing?.data?.address?.street }} {{ order.billing?.data?.address?.streetNumber }}</p>
+                <p>{{ order.billing?.data?.address?.zipCode }} {{ order.billing?.data?.address?.city }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- <div class="page-pickup-shelf-details-header__select grow" *ngIf="showMultiselect$ | async">
+          <button class="cta-select-all" (click)="selectAll()">Alle auswählen</button>
+          {{ selectedOrderItemCount$ | async }} von {{ orderItemCount$ | async }} Titeln
+        </div> -->
+    </div>
+  </div>
+
+  <ng-template #featureLoading>
+    <div class="fetch-wrapper">
+      <div class="fetching"></div>
+      <div class="fetching"></div>
+      <div class="fetching"></div>
+    </div>
+  </ng-template>
+
+  <!-- <ng-template #abholfrist>
+      <div class="min-w-[9rem]">Abholfrist</div>
+      <div *ngIf="!(changeDateLoader$ | async)" class="flex flex-row font-bold">
+        <button
+          [uiOverlayTrigger]="deadlineDatepicker"
+          #deadlineDatepickerTrigger="uiOverlayTrigger"
+          [disabled]="!isKulturpass && (!!orderItem?.features?.paid || (changeDateDisabled$ | async))"
+          class="cta-pickup-deadline"
+        >
+          <strong class="border-r border-[#AEB7C1] pr-4">
+            {{ orderItem?.pickUpDeadline | date: 'dd.MM.yy' }}
+          </strong>
+          <shared-icon class="text-[#596470] ml-4" [size]="24" icon="isa-calendar"></shared-icon>
+        </button>
+        <ui-datepicker
+          #deadlineDatepicker
+          yPosition="below"
+          xPosition="after"
+          [xOffset]="8"
+          [min]="minDateDatepicker"
+          [disabledDaysOfWeek]="[0]"
+          [selected]="orderItem?.pickUpDeadline"
+          (save)="updatePickupDeadline($event)"
+        >
+        </ui-datepicker>
+      </div>
+      <ui-spinner *ngIf="changeDateLoader$ | async; let loader" class="flex flex-row font-bold loader" [show]="loader"></ui-spinner>
+    </ng-template>
+  
+    <ng-template #preferredPickUpDate>
+      <div class="min-w-[9rem]">Zurücklegen bis</div>
+      <div *ngIf="!(changePreferredDateLoader$ | async)" class="flex flex-row font-bold">
+        <button
+          [uiOverlayTrigger]="preferredPickUpDatePicker"
+          #preferredPickUpDatePickerTrigger="uiOverlayTrigger"
+          [disabled]="(!isKulturpass && !!orderItem?.features?.paid) || (changeDateDisabled$ | async)"
+          class="cta-pickup-preferred"
+        >
+          <strong *ngIf="preferredPickUpDate$ | async; let pickUpDate; else: selectTemplate">
+            {{ pickUpDate | date: 'dd.MM.yy' }}
+          </strong>
+          <ng-template #selectTemplate>
+            <strong class="border-r border-[#AEB7C1] pr-4">Auswählen</strong>
+          </ng-template>
+          <shared-icon class="text-[#596470] ml-4" [size]="24" icon="isa-calendar"></shared-icon>
+        </button>
+        <ui-datepicker
+          #preferredPickUpDatePicker
+          yPosition="below"
+          xPosition="after"
+          [xOffset]="8"
+          [min]="minDateDatepicker"
+          [disabledDaysOfWeek]="[0]"
+          [selected]="(preferredPickUpDate$ | async) || today"
+          (save)="updatePreferredPickUpDate($event)"
+        >
+        </ui-datepicker>
+      </div>
+      <ui-spinner *ngIf="changePreferredDateLoader$ | async; let loader" class="flex flex-row font-bold loader" [show]="loader"> </ui-spinner>
+    </ng-template>
+  
+    <ng-template #vslLieferdatum>
+      <div class="min-w-[9rem]">vsl. Lieferdatum</div>
+      <div *ngIf="!(changeDateLoader$ | async)" class="flex flex-row font-bold">
+        <button
+          class="cta-datepicker"
+          [disabled]="changeDateDisabled$ | async"
+          [uiOverlayTrigger]="uiDatepicker"
+          #datepicker="uiOverlayTrigger"
+        >
+          <span class="border-r border-[#AEB7C1] pr-4">
+            {{ orderItem?.estimatedShippingDate | date: 'dd.MM.yy' }}
+          </span>
+          <shared-icon class="text-[#596470] ml-4" [size]="24" icon="isa-calendar"></shared-icon>
+        </button>
+        <ui-datepicker
+          #uiDatepicker
+          yPosition="below"
+          xPosition="after"
+          [xOffset]="8"
+          [min]="minDateDatepicker"
+          [disabledDaysOfWeek]="[0]"
+          [selected]="orderItem?.estimatedShippingDate"
+          (save)="updateEstimatedShippingDate($event)"
+        >
+        </ui-datepicker>
+      </div>
+      <ui-spinner *ngIf="changeDateLoader$ | async; let loader" class="flex flex-row font-bold loader" [show]="loader"></ui-spinner>
+    </ng-template> -->
+</ng-container>
--- a/apps/page/pickup-shelf/src/lib/shared/pickup-shelf-details-header/pickup-shelf-details-header.component.scss
+++ b/apps/page/pickup-shelf/src/lib/shared/pickup-shelf-details-header/pickup-shelf-details-header.component.scss
@@ -0,0 +1,140 @@
+:host {
+  @apply block mb-[0.125rem];
+}
+
+.page-pickup-shelf-details-header__edit-cta {
+  &:disabled {
+    @apply text-inactive-customer;
+  }
+}
+
+.page-pickup-shelf-details-header__paid-marker {
+  @apply font-bold flex items-center justify-end;
+
+  shared-icon {
+    @apply mr-2 text-white bg-green-600 w-px-25 h-px-25 flex items-center justify-center rounded-full;
+  }
+}
+
+.page-pickup-shelf-details-header__details {
+  @apply grid grid-flow-row pt-4;
+}
+
+.page-pickup-shelf-details-header__details-header {
+  @apply flex flex-row justify-between font-bold;
+}
+
+.page-pickup-shelf-details-header__details-wrapper {
+  @apply grid grid-flow-row gap-x-6 gap-y-[0.375rem];
+  grid-template-columns: 50% auto;
+  grid-template-areas:
+    'buyernumber .'
+    'ordernumber .'
+    'orderdate processingstatus'
+    'ordersource changedate'
+    'dignotification pickup';
+
+  .detail {
+    shared-icon {
+      @apply flex items-center;
+    }
+
+    .loader {
+      width: 130px;
+    }
+  }
+}
+
+.page-pickup-shelf-details-header__buyer-number {
+  grid-area: buyernumber;
+}
+.page-pickup-shelf-details-header__order-number {
+  grid-area: ordernumber;
+}
+.page-pickup-shelf-details-header__order-date {
+  grid-area: orderdate;
+}
+.page-pickup-shelf-details-header__processing-status {
+  grid-area: processingstatus;
+}
+.page-pickup-shelf-details-header__order-source {
+  grid-area: ordersource;
+}
+.page-pickup-shelf-details-header__change-date {
+  grid-area: changedate;
+}
+.page-pickup-shelf-details-header__pick-up {
+  grid-area: pickup;
+}
+.page-pickup-shelf-details-header__dig-and-notification {
+  grid-area: dignotification;
+}
+
+.cta-status-dropdown,
+.cta-datepicker,
+.cta-pickup-deadline,
+.cta-pickup-preferred {
+  @apply flex flex-row border-none outline-none text-p2 font-bold bg-transparent items-center px-0 mx-0;
+
+  &:disabled {
+    @apply text-disabled-customer cursor-not-allowed;
+
+    shared-icon {
+      @apply text-disabled-customer;
+    }
+  }
+}
+
+.page-pickup-shelf-details-header__select {
+  @apply flex flex-col items-end;
+}
+
+.page-pickup-shelf-details-header__additional-addresses {
+  .page-pickup-shelf-details-header__addresses-popover {
+    @apply absolute inset-x-0 top-16 bottom-0 z-popover;
+
+    .close {
+      @apply bg-white absolute right-0 p-6;
+    }
+
+    .page-pickup-shelf-details-header__addresses-popover-data {
+      @apply flex flex-col bg-white p-6 z-popover min-h-[200px];
+      box-shadow: 0px 6px 24px rgba(206, 212, 219, 0.8);
+
+      .page-pickup-shelf-details-header__addresses-popover-delivery {
+        @apply grid mb-6;
+        grid-template-columns: 9.5625rem auto;
+
+        .page-pickup-shelf-details-header__addresses-popover-delivery-data {
+          p {
+            @apply font-bold;
+          }
+        }
+      }
+
+      .page-pickup-shelf-details-header__addresses-popover-billing {
+        @apply grid;
+        grid-template-columns: 9.5625rem auto;
+
+        .page-pickup-shelf-details-header__addresses-popover-billing-data {
+          p {
+            @apply font-bold;
+          }
+        }
+      }
+    }
+  }
+}
+
+.cta-select-all {
+  @apply text-brand bg-transparent text-p2 font-bold outline-none border-none;
+}
+
+.fetch-wrapper {
+  @apply grid grid-flow-col gap-4;
+}
+
+.fetching {
+  @apply w-24 h-px-20 bg-customer;
+  animation: load 0.75s linear infinite;
+}
--- a/apps/page/pickup-shelf/src/lib/shared/pickup-shelf-details-header/pickup-shelf-details-header.component.ts
+++ b/apps/page/pickup-shelf/src/lib/shared/pickup-shelf-details-header/pickup-shelf-details-header.component.ts
@@ -0,0 +1,118 @@
+import { AsyncPipe, DatePipe, NgFor, NgIf, NgSwitch, NgSwitchCase, NgTemplateOutlet } from '@angular/common';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, inject } from '@angular/core';
+import { KeyValueDTOOfStringAndString, NotificationChannel, OrderDTO, OrderItemListItemDTO } from '@swagger/oms';
+import { PickupShelfDetailsStore } from '../../store';
+import { filter, map, shareReplay, switchMap } from 'rxjs/operators';
+import { BehaviorSubject, combineLatest } from 'rxjs';
+import { CrmCustomerService } from '@domain/crm';
+import { DateAdapter } from '@ui/common';
+import { IconModule } from '@shared/components/icon';
+import { UiDropdownModule } from '@ui/dropdown';
+import { UiSpinnerModule } from '@ui/spinner';
+import { PickupShelfNotificationsChannelPipe } from '../pipes/notifications-channel.pipe';
+import { PickupShelfProcessingStatusPipe } from '../pipes/processing-status.pipe';
+
+@Component({
+  selector: 'page-pickup-shelf-details-header',
+  templateUrl: 'pickup-shelf-details-header.component.html',
+  styleUrls: ['pickup-shelf-details-header.component.scss'],
+  standalone: true,
+  host: { class: 'page-pickup-shelf-details-header' },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    NgIf,
+    NgFor,
+    AsyncPipe,
+    IconModule,
+    NgTemplateOutlet,
+    NgSwitch,
+    NgSwitchCase,
+    DatePipe,
+    UiDropdownModule,
+    UiSpinnerModule,
+    PickupShelfNotificationsChannelPipe,
+    PickupShelfProcessingStatusPipe,
+  ],
+})
+export class PickUpShelfDetailsHeaderComponent implements OnInit {
+  private _store = inject(PickupShelfDetailsStore);
+
+  @Output()
+  editClick = new EventEmitter<OrderItemListItemDTO>();
+
+  @Output()
+  handleAction = new EventEmitter<KeyValueDTOOfStringAndString>();
+
+  @Input()
+  order: OrderDTO;
+
+  get isKulturpass() {
+    return this.order?.features?.orderSource === 'KulturPass';
+  }
+
+  minDateDatepicker = this.dateAdapter.addCalendarDays(this.dateAdapter.today(), -1);
+  today = this.dateAdapter.today();
+
+  selectedOrderItemCount$ = this._store.selectedOrderItemIds$.pipe(map((ids) => ids?.length ?? 0));
+
+  orderItemCount$ = this._store.orderItems$.pipe(map((items) => items?.length ?? 0));
+
+  orderItem$ = this._store.orderItems$.pipe(map((orderItems) => orderItems?.find((_) => true)));
+
+  preferredPickUpDate$ = new BehaviorSubject<Date>(undefined);
+
+  notificationsChannel: NotificationChannel = 0;
+
+  changeDateLoader$ = new BehaviorSubject<boolean>(false);
+  changePreferredDateLoader$ = new BehaviorSubject<boolean>(false);
+  changeStatusLoader$ = new BehaviorSubject<boolean>(false);
+
+  //   changeStatusDisabled$ = this._store.changeActionDisabled$;
+  //   changeDateDisabled$ = this.changeStatusDisabled$;
+
+  features$ = this.orderItem$.pipe(
+    filter((orderItem) => !!orderItem),
+    switchMap((orderItem) =>
+      this.customerService.getCustomers(orderItem.buyerNumber).pipe(
+        map((res) => res.result.find((c) => c.customerNumber === orderItem.buyerNumber)),
+        map((customer) => customer?.features || []),
+        map((features) => features.filter((f) => f.enabled && !!f.description))
+      )
+    ),
+    shareReplay()
+  );
+
+  statusActions$ = this.orderItem$.pipe(map((orderItem) => orderItem?.actions?.filter((action) => action.enabled === false)));
+
+  //   showMultiselect$ = combineLatest([this._store.orderItems$, this._store.fetchPartial$, this._store.itemsSelectable$]).pipe(
+  //     map(([orderItems, fetchPartial, multiSelect]) => multiSelect && fetchPartial && orderItems?.length > 1)
+  //   );
+
+  crudaUpdate$ = this.orderItem$.pipe(map((orederItem) => !!(orederItem?.cruda & 4)));
+
+  editButtonDisabled$ = combineLatest([this.changeStatusLoader$, this.crudaUpdate$]).pipe(
+    map(([changeStatusLoader, crudaUpdate]) => changeStatusLoader || !crudaUpdate)
+  );
+
+  canEditStatus$ = combineLatest([this.statusActions$, this.crudaUpdate$]).pipe(
+    map(([statusActions, crudaUpdate]) => statusActions?.length > 0 && crudaUpdate)
+  );
+
+  openAddresses: boolean = false;
+
+  get digOrderNumber(): string {
+    return this.order?.linkedRecords?.find((_) => true)?.number;
+  }
+
+  get showAddresses(): boolean {
+    return (this.order?.orderType === 2 || this.order?.orderType === 4) && (!!this.order?.shipping || !!this.order?.billing);
+  }
+
+  get showFeature(): boolean {
+    return !!this.order?.features && !!this.order?.features?.orderType;
+  }
+
+  constructor(private customerService: CrmCustomerService, private dateAdapter: DateAdapter, private cdr: ChangeDetectorRef) {}
+
+  ngOnInit() {}
+}
--- a/apps/page/pickup-shelf/src/lib/shared/pickup-shelf-list-item/pickup-shelf-list-item.component.ts
+++ b/apps/page/pickup-shelf/src/lib/shared/pickup-shelf-list-item/pickup-shelf-list-item.component.ts
@@ -6,7 +6,7 @@ import { EnvironmentService } from '@core/environment';
 import { IconModule } from '@shared/components/icon';
 import { DBHOrderItemListItemDTO, KeyValueDTOOfStringAndString } from '@swagger/oms';
 import { UiCommonModule } from '@ui/common';
-import { PickupShelfProcessingStatusPipe } from './processing-status.pipe';
+import { PickupShelfProcessingStatusPipe } from '../pipes/processing-status.pipe';
 import { FormsModule } from '@angular/forms';
 import { PickupShelfStore } from '../../store';
 import { map } from 'rxjs/operators';
--- a/apps/page/pickup-shelf/src/lib/shared/pipes/notifications-channel.pipe.ts
+++ b/apps/page/pickup-shelf/src/lib/shared/pipes/notifications-channel.pipe.ts
@@ -0,0 +1,28 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { NotificationChannel } from '@swagger/oms';
+
+@Pipe({
+  name: 'notificationsChannel',
+  standalone: true,
+})
+export class PickupShelfNotificationsChannelPipe implements PipeTransform {
+  static channels = new Map<NotificationChannel, string>([
+    [1, 'E-Mail'],
+    [2, 'SMS'],
+    [4, 'Telefon'],
+    [8, 'Fax'],
+    [16, 'Brief'],
+  ]);
+
+  transform(value: NotificationChannel = 0): string {
+    const result: string[] = [];
+
+    for (const [channel, name] of PickupShelfNotificationsChannelPipe.channels) {
+      if (value & channel) {
+        result.push(name);
+      }
+    }
+
+    return result.join(' | ');
+  }
+}
--- a/apps/page/pickup-shelf/src/lib/shared/pickup-shelf-list-item/processing-status.pipe.ts
+++ b/apps/page/pickup-shelf/src/lib/shared/pickup-shelf-list-item/processing-status.pipe.ts