Untitled

 avatar
unknown
plain_text
2 years ago
12 kB
5
Indexable
<div class="multi-cart">
  <h4 class="page-title">{{ 'multi-cart.title' | translate }}</h4>
  <div class="multi-cart__content">
    <ng-container *ngIf="currentCartLoaded; else currentCartLoader">
      <app-configurable-product-cart
          *ngIf="isContractInCart()"
          [isCartOperationInProgress]="isCartOperationInProgress"
          [currency]="currency"
          [totals]="totals"
          [currentCart]="currentCart"
          [currentCartItems]="currentCartItems"
          [hasNickname]="hasNickname"
          [validUntilDate]="validUntilDate"
          (showAddNicknameModal)="addNicknameModalActive = $event"
          (showDeleteQuoteModal)="deleteQuoteModalActive = $event"
          (removeQuoteItem)="quoteItemToDelete = $event"
          (showRemoveConfigurationModal)="removeConfigurationModalActive = $event">
      </app-configurable-product-cart>
      <app-spare-part-product-cart
          #appSparePartProductCart
          *ngIf="!isContractInCart()"
          [isCartOperationInProgress]="isCartOperationInProgress"
          [currency]="currency"
          [currentCart]="currentCart"
          [currentCartItems]="currentCartItems"
          [hasNickname]="hasNickname"
          [wishlists]="wishlists"
          [addWishlistModalActive]="addWishlistModalActive"
          (showAddWishlistModal)="addWishlistModalActive = $event"
          (showAddNicknameModal)="addNicknameModalActive = $event"
          (showDeleteCartModal)="deleteCartModalActive = $event"
          (generatePdfFile)="generatePdfFile()"
          (removeCartItem)="removeCartItem($event)"
          (updateCartItemQuantity)="updateCartItemQuantity($event)">
      </app-spare-part-product-cart>
    </ng-container>
    <ng-template #currentCartLoader>
      <div class="multi-cart__current-cart-loader">
        <div class="loading-animation"></div>
      </div>
    </ng-template>
    <div class="multi-cart__other-carts">
        <h6 *ngIf="isSparePartsEnabled && currentTab === multiCartTabs.PARTS">{{ 'multi-cart.other-carts' | translate }}</h6>
        <h6 *ngIf="isCpqEnabled && currentTab === multiCartTabs.SERVICES">{{ 'multi-cart.other-quotes' | translate }}</h6>
        <div class="tabs">
          <div class="tabs__list margin-left-0" *ngIf="otherCarts?.length > 0">
            <span class="tabs__item" [ngClass]="{'is-active': currentTab === multiCartTabs.PARTS}"
                  *ngIf="isSparePartsEnabled && otherSparePartProductCarts?.length > 0"
                  (click)="currentTab = multiCartTabs.PARTS">
              {{ 'multi-cart.tab-parts' | translate }}
              <span>
                ({{ otherSparePartProductCarts?.length }})
              </span>
            </span>
            <span class="tabs__item" [ngClass]="{'is-active': currentTab === multiCartTabs.SERVICES}"
                  *ngIf="isCpqEnabled && otherConfigurableProductCarts?.length > 0"
                  (click)="currentTab = multiCartTabs.SERVICES">
              {{ 'multi-cart.tab-services' | translate }} 
              <span>
                ({{ otherConfigurableProductCarts?.length }})
              </span>
            </span>
          </div>
          <div *ngIf="isSparePartsEnabled"
               class="tabs__panel" [ngClass]="{'is-active': currentTab === multiCartTabs.PARTS}">
            <div class="other-carts" (window:resize)="onResize($event)">
              <div class="create-new-cart" (click)="createNewEmptyCartAndRedirectTo()">
                <h6>+ {{ 'multi-cart.create-new-cart' | translate }} </h6>
              </div>
              <ng-container
                  *ngFor="let otherCart of otherSparePartProductCarts | 
                    slice:0:(viewAllPartsCarts ? otherSparePartProductCarts.length : viewItemsForParts)">
                <div class="other-carts__cart" [ngClass]="{'no-items': otherCart.itemDetails?.length === 0}">
                  <h6 class="cart-name">{{ cartName(otherCart) }}</h6>
                  <div *ngIf="otherCart.itemDetails[0]?.id" class="cart-image">
                    <img [src]="getImageForOtherCart(otherCart.itemDetails[0]?.id)" 
                         alt="{{ otherCart.itemDetails[0]?.attributes.abstractSku }}">
                  </div>
                  <div class="cart-items">
                    <h6 class="cart-item-name">{{ otherCart.id }}</h6>
                    <ng-container *ngIf="otherCart.itemDetails?.length > 0; else noItems">
                      <strong>
                        {{ singularOrPlural(otherCart.itemDetails.length, 'orders-page.item') | 
                           translate: {number: otherCart.itemDetails.length} }}
                      </strong>
                      <span>{{ otherCart.attributes.systemDetails?.nameEnUs }}</span>
                      <span>FL: {{ otherCart.attributes.systemDetails?.siemensEquipmentId }}</span>
                    </ng-container>
                    <ng-template #noItems>
                      <span>{{ 'multi-cart.no-cart-items' | translate }}</span>
                    </ng-template>
                  </div>
                  <div class="cart-actions">
                    <button *ngIf="otherCart.itemDetails?.length > 0" type="submit" class="button button--primary" 
                        (click)="switchDefaultCart(otherCart.id, '/sap-delivery-details')">
                      {{ 'multi-cart.continue' | translate }}
                    </button>
                    <button type="submit" class="button" (click)="switchDefaultCart(otherCart.id)">
                      {{ 'multi-cart.select' | translate }}
                    </button>
                  </div>
                </div>
              </ng-container>
            </div>
            <div class="action-buttons">
              <button type="button" 
                  class="button button--link icon-arrow-long-right"
                  *ngIf="otherSparePartProductCarts?.length > viewItemsForParts && !viewAllPartsCarts" 
                  (click)="viewAllPartsCarts = true">
                {{ 'multi-cart.button-view-all' | translate }}
              </button>
              <button type="button" 
                  class="button button--link icon-arrow-long-left"
                  *ngIf="viewAllPartsCarts" 
                  (click)="viewAllPartsCarts = false">
                {{ 'multi-cart.button-show-less' | translate }}
              </button>
            </div>
          </div>
          <div *ngIf="isCpqEnabled"
               class="tabs__panel" [ngClass]="{'is-active': currentTab === multiCartTabs.SERVICES}">
            <div class="other-quotes" (window:resize)="onResize($event)">
              <ng-container 
                  *ngFor="let otherQuote of otherConfigurableProductCarts | 
                    slice:0:(viewAllServicesQuotes ? otherConfigurableProductCarts.length : viewItemsForServices)">
                <div class="other-quotes__quote">
                  <h6 class="quote-name">{{ cartName(otherQuote) }}</h6>
                  <div class="quote-price">{{ 'multi-cart.your-annual-price' | translate }}<br/>
                    <strong>
                      {{ otherQuote.attributes.totals?.cpqNetPriceTotal | currency: otherQuote.attributes.currency }}
                    </strong>
                  </div>
                  <div class="quote-image">
                    <img [src]="getImageForOtherCart(otherQuote.itemDetails[0]?.attributes.sku)" 
                         alt="{{ otherQuote.itemDetails[0]?.attributes.sku }}">
                  </div>
                  <div class="quote-items">
                    <h6 class="quote-item-name">{{ otherQuote.id }}</h6>
                    <ng-container *ngIf="otherQuote.itemDetails?.length > 0; else noItems">
                      <strong>
                        {{ singularOrPlural(otherQuote.itemDetails.length, 'orders-page.item') | 
                           translate: {number: otherQuote.itemDetails.length} }}
                      </strong>
                      <span>{{ 'mini-cart.equType' | translate:{count: calculateEquType(otherQuote.itemDetails)} }}</span>
                      <span>{{ 'mini-cart.fls' | translate:{count: otherQuote.itemDetails.length} }}</span>
                    </ng-container>
                    <ng-template #noItems>
                      <span>{{ 'multi-cart.no-quote-items' | translate }}</span>
                    </ng-template>
                  </div>
                  <div class="quote-actions">
                    <button type="submit" class="button button--primary" [attr.data-test]="'button-continue-' + otherQuote.id"
                            (click)="switchDefaultCart(otherQuote.id, '/quote-summary')">
                      {{ 'multi-cart.continue' | translate }}
                    </button>
                    <button type="submit" class="button" [attr.data-test]="'button-select' + otherQuote.id"
                            (click)="switchDefaultCart(otherQuote.id)">
                      {{ 'multi-cart.select' | translate }}
                    </button>
                  </div>
                </div>
              </ng-container>
            </div>
            <div class="action-buttons">
              <button type="button" 
                  class="button button--link icon-arrow-long-right"
                  *ngIf="otherConfigurableProductCarts?.length > viewItemsForServices && !viewAllServicesQuotes" 
                  (click)="viewAllServicesQuotes = true">
                {{ 'multi-cart.button-view-all' | translate }}
              </button>
              <button type="button" 
                  class="button button--link icon-arrow-long-left"
                  *ngIf="viewAllServicesQuotes" 
                  (click)="viewAllServicesQuotes = false">
                {{ 'multi-cart.button-show-less' | translate }}
              </button>
            </div>
          </div>
        </div>
    </div>
  </div>
  <app-add-new-wishlist
      [showModal]="addWishlistModalActive"
      (closeModal)="addWishlistModalActive = false">
  </app-add-new-wishlist>
  <app-modal-add-cart-name
      *ngIf="currentCart"
      [cartId]="currentCart.id"
      [hasNickname]="hasNickname"
      [newNameChange]="currentCartName$"
      [showAddNicknameModal]="addNicknameModalActive"
      [isContractInCart]="isContractInCart()"
      (closeModal)="addNicknameModalActive = false">
  </app-modal-add-cart-name>
  <app-modal-confirm
      [type]="iconType.WARNING"
      [modalTitle]="'multi-cart.delete-cart-title' | translate"
      [notifyText]="'multi-cart.delete-cart-text' | translate"
      [cancelBtnText]="'multi-cart.cancel-btn' | translate"
      [primaryBtnText]="'multi-cart.delete-btn' | translate"
      [showModalConfirm]="deleteCartModalActive"
      (closeModalConfirm)="deleteCartModalActive = false"
      (primaryActionConfirm)="deleteCart()">
  </app-modal-confirm>
  <app-modal-confirm
      [type]="iconType.WARNING"
      [modalTitle]="'multi-cart.delete-quote-title' | translate"
      [notifyText]="'multi-cart.delete-quote-text' | translate"
      [cancelBtnText]="'multi-cart.cancel-btn' | translate"
      [primaryBtnText]="'multi-cart.delete-btn' | translate"
      [showModalConfirm]="deleteQuoteModalActive"
      (closeModalConfirm)="deleteQuoteModalActive = false"
      (primaryActionConfirm)="deleteQuote()">
  </app-modal-confirm>
  <app-modal-confirm
      [type]="iconType.WARNING"
      [modalTitle]="'multi-cart.remove-configuration-title' | translate"
      [notifyText]="'multi-cart.remove-configuration-text' | translate"
      [cancelBtnText]="'multi-cart.cancel-btn' | translate"
      [primaryBtnText]="'multi-cart.remove-btn' | translate"
      [showModalConfirm]="removeConfigurationModalActive"
      (closeModalConfirm)="removeConfigurationModalActive = false"
      (primaryActionConfirm)="removeQuoteItem()">
  </app-modal-confirm>
</div>
Editor is loading...