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

<ng-container *ngIf="(groupedItems$ | async)?.length <= 0 && !(fetching$ | async); else shoppingCart">
  <div class="card stretch">
    <div class="empty-message">
      <span class="cart-icon flex items-center justify-center">
        <shared-icon icon="shopping-cart-bold" [size]="24"></shared-icon>
      </span>

      <h1>Ihr Warenkorb ist leer.</h1>
      <p>
        Sie haben alle Artikel aus dem<br />
        Warenkorb entfernt oder noch<br />
        keinen Artikel hinzugefügt.
      </p>

      <div class="btn-wrapper">
        <a class="cta-primary" [routerLink]="productSearchBasePath">Artikel suchen</a>
        <button class="cta-secondary" (click)="openDummyModal()">Neuanlage</button>
      </div>
    </div>
  </div>
</ng-container>

<div class="flex items-center justify-center card stretch" *ngIf="fetching$ | async">
  <ui-spinner [show]="true"> </ui-spinner>
</div>

<ng-template #shoppingCart>
  <ng-container *ngIf="shoppingCart$ | async; let shoppingCart">
    <div class="card stretch">
      <div class="cta-print-wrapper">
        <button class="cta-print" (click)="openPrintModal()">
          Drucken
        </button>
      </div>
      <h1 class="header">Warenkorb</h1>

      <ng-container *ngIf="!(isDesktop$ | async)">
        <page-checkout-review-details></page-checkout-review-details>
      </ng-container>

      <ng-container *ngFor="let group of groupedItems$ | async; let lastGroup = last">
        <ng-container *ngIf="group?.orderType !== undefined">
          <hr />
          <div class="row item-group-header bg-[#F5F7FA]">
            <shared-icon
              *ngIf="group.orderType !== 'Dummy'"
              class="icon-order-type"
              [size]="group.orderType === 'B2B-Versand' ? 36 : 24"
              [icon]="group.orderType"
            ></shared-icon>

            <div class="label" [class.dummy]="group.orderType === 'Dummy'">
              {{ group.orderType !== 'Dummy' ? group.orderType : 'Manuelle Anlage / Dummy Bestellung' }}
              <button
                *ngIf="group.orderType === 'Dummy'"
                class="text-brand border-none font-bold text-p1 outline-none pl-4"
                (click)="openDummyModal()"
              >
                Hinzufügen
              </button>
            </div>

            <div class="grow"></div>
            <div class="pl-4" *ngIf="group.orderType !== 'Download' && group.orderType !== 'Dummy'">
              <button class="cta-edit" (click)="showPurchasingListModal(group.items)">
                Ändern
              </button>
            </div>
          </div>
          <hr
            *ngIf="
              group.orderType === 'Download' ||
              group.orderType === 'Versand' ||
              group.orderType === 'B2B-Versand' ||
              group.orderType === 'DIG-Versand'
            "
          />
        </ng-container>
        <ng-container *ngFor="let item of group.items; let lastItem = last; let i = index">
          <ng-container
            *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]">
                  <span class="branch-name">{{ targetBranch?.name }} | {{ targetBranch | branchAddress }}</span>
                </div>
                <hr />
              </ng-container>
            </ng-container>
          </ng-container>

          <page-shopping-cart-item
            (changeItem)="changeItem($event)"
            (changeDummyItem)="changeDummyItem($event)"
            (changeQuantity)="updateItemQuantity($event)"
            [quantityError]="(quantityError$ | async)[item.product.catalogProductNumber]"
            [item]="item"
            [orderType]="group?.orderType"
            [loadingOnItemChangeById]="loadingOnItemChangeById$ | async"
            [loadingOnQuantityChangeById]="loadingOnQuantityChangeById$ | async"
          ></page-shopping-cart-item>

          <hr *ngIf="!lastItem" />
        </ng-container>
      </ng-container>
      <div class="h-[8.9375rem]"></div>
    </div>
    <div class="card footer flex flex-col justify-center items-center">
      <div class="flex flex-row items-start justify-between w-full mb-1">
        <ng-container *ngIf="totalItemCount$ | async; let totalItemCount">
          <div *ngIf="totalReadingPoints$ | async; let totalReadingPoints" class="total-item-reading-points w-full">
            {{ totalItemCount }} Artikel | {{ totalReadingPoints }} Lesepunkte
          </div>
        </ng-container>
        <div class="flex flex-col w-full">
          <strong class="total-value">
            Zwischensumme {{ shoppingCart?.total?.value | currency: shoppingCart?.total?.currency:'code' }}
          </strong>
          <span class="shipping-cost-info">ohne Versandkosten</span>
        </div>
      </div>
      <button
        class="cta-primary"
        (click)="order()"
        [disabled]="
          showOrderButtonSpinner ||
          ((primaryCtaLabel$ | async) === 'Bestellen' && !(checkNotificationChannelControl$ | async)) ||
          notificationsControl?.invalid ||
          ((primaryCtaLabel$ | async) === 'Bestellen' && ((checkingOla$ | async) || (checkoutIsInValid$ | async)))
        "
      >
        <ui-spinner [show]="showOrderButtonSpinner">
          {{ primaryCtaLabel$ | async }}
        </ui-spinner>
      </button>
    </div>
  </ng-container>
</ng-template>