All files / src/app/extensions/quoting/shared/quote-line-item-list-element quote-line-item-list-element.component.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<div class="row list-item-row" data-testing-id="product-list-item">
  <!-- Product Image -->
  <div class="col-2 list-item">
    <ish-product-image imageType="S" [link]="true" />
  </div>
 
  <div class="col-7 col-md-6 col-xl-4 list-item">
    <!--Product Description -->
    <div class="pli-description">
      <ish-product-name />
 
      <!-- Product ID -->
      <ish-product-id />
 
      <!-- Product Variations -->
      <ish-product-variation-display />
      <!-- Product Bundles -->
      <ish-product-bundle-display />
 
      <ish-product-inventory />
      <div *ngIf="editable$ | async" class="d-flex align-items-center">
        <ish-lazy-product-add-to-order-template
          [cssClass]="'btn-link btn-tool add-to-order-template'"
          displayType="icon"
        />
        <ish-lazy-product-add-to-wishlist [cssClass]="'btn-link btn-tool ms-0'" displayType="icon" />
        <button
          type="button"
          class="btn-tool btn-link"
          [attr.data-testing-id]="'remove-line-item'"
          [attr.data-id]="lineItem.id"
          title="{{ 'shopping_cart.remove.item.button.label' | translate }}"
          (click)="onDeleteItem()"
        >
          <fa-icon [icon]="['fas', 'trash-alt']" />
        </button>
      </div>
    </div>
 
    <!-- mobile quantity -->
    <div class="quantity d-xl-none">
      <div class="form-group">
        <ish-product-quantity-label
          translationKey="shopping_cart.pli.qty.label"
          [for]="'quote-quantity_' + lineItem.id"
        />
        <ish-product-quantity
          *ngIf="editable$ | async; else readonlyQuantity"
          [elementId]="'quote-quantity_' + lineItem.id"
        />
        <ng-template #readonlyQuantity>
          {{ lineItem.quantity.value | number }}
        </ng-template>
      </div>
    </div>
  </div>
 
  <!-- desktop quantity -->
  <div class="quantity col-xl-2 list-item d-none d-xl-flex">
    <div class="form-group w-100" [ngClass]="{ 'text-end': editable$ | async }">
      <ish-product-quantity *ngIf="editable$ | async; else readonlyQuantity" />
      <ng-template #readonlyQuantity>
        {{ lineItem.quantity.value | number }}
      </ng-template>
    </div>
  </div>
 
  <!-- Prices -->
  <div class="col-md-2 d-none d-md-block list-item column-price single-price">
    <!-- Original Single Base Price  -->
    <p *ngIf="lineItem.originSingleBasePrice">
      {{ 'quote.items.original_price.label' | translate }} {{ lineItem.originSingleBasePrice | ishPrice }}
    </p>
 
    <!-- (Suggested) Single Base Price  -->
    <p>
      <ng-container *ngIf="lineItem.originSingleBasePrice">{{
        'quote.items.suggested_price.label' | translate
      }}</ng-container>
      {{ lineItem.singleBasePrice | ishPrice }}
    </p>
  </div>
  <div class="col-3 col-md-2 list-item column-price">
    <div>
      <p *ngIf="lineItem.originTotal">{{ lineItem.originTotal | ishPrice }}</p>
 
      <!-- (Suggested) Total Price  -->
      <span *ngIf="lineItem.originTotal" class="d-md-none">{{ 'quote.items.suggested_price.label' | translate }}</span>
      <div data-testing-id="total-price">{{ lineItem.total | ishPrice }}</div>
    </div>
  </div>
</div>