All files / src/app/shared/components/product/product-price product-price.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
7x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<ng-container *ngIf="visible$ | async">
  <ng-container *ngIf="isPriceRange$ | async; then priceRange; else singlePrice" />
</ng-container>
 
<ng-template #singlePrice>
  <ng-container *ngIf="data$ | async as d">
    <div
      class="current-price"
      [ngClass]="{
        'sale-price': showInformationalPrice && d.isListPriceGreaterThanSalePrice,
        'sale-price-higher': showInformationalPrice && d.isListPriceLessThanSalePrice
      }"
      data-testing-id="current-price"
    >
      <ng-container *ngIf="d.salePrice; else salePriceNotAvailable">
        {{
          (d.isListPriceGreaterThanSalePrice
            ? 'product.price.salePricePrefix.text'
            : 'product.price.salePriceFallback.text'
          ) | translate : { '0': d.salePrice | ishPrice }
        }}
        <meta itemprop="price" [attr.content]="d.salePrice.value | number : '1.2-2' : 'en_US'" />
        <meta itemprop="priceCurrency" [attr.content]="d.salePrice.currency" />
      </ng-container>
      <ng-template #salePriceNotAvailable> {{ 'product.price.na.text' | translate }} </ng-template>
    </div>
 
    <div
      *ngIf="showInformationalPrice && d.isListPriceGreaterThanSalePrice"
      class="old-price"
      data-testing-id="old-price"
    >
      <span class="price-value">
        {{ 'product.price.listPriceFallback.text' | translate : { '0': d.listPrice | ishPrice } }}
      </span>
      <span *ngIf="showPriceSavings" class="price-savings">
        {{ 'product.price.savingsFallback.text' | translate : { '0': d.priceSavings | ishPrice } }}
      </span>
    </div>
 
    <div *ngIf="showScaledPrices && d.scaledPrices?.length" class="scaled-prices" data-testing-id="scaled-prices">
      <ng-container *ngFor="let scaledPrice of d.scaledPrices; index as i; last as lastScaledPrice">
        <div *ngIf="lastScaledPrice; else showRange">
          {{
            'product.price.scaledPrice.text.last'
              | translate : { '0': scaledPrice.minQuantity, '1': scaledPrice | ishPrice }
          }}
        </div>
        <ng-template #showRange>
          <div *ngIf="scaledPrice.minQuantity !== d.scaledPrices[i + 1].minQuantity - 1; else singleScaledPrice">
            {{
              'product.price.scaledPrice.text'
                | translate
                  : {
                      '0': scaledPrice.minQuantity,
                      '1': d.scaledPrices[i + 1].minQuantity - 1,
                      '2': scaledPrice | ishPrice
                    }
            }}
          </div>
          <ng-template #singleScaledPrice>
            <div>
              {{
                'product.price.scaledPrice.single.text'
                  | translate
                    : {
                        '0': scaledPrice.minQuantity,
                        '1': scaledPrice | ishPrice
                      }
              }}
            </div>
          </ng-template>
        </ng-template>
      </ng-container>
    </div>
  </ng-container>
</ng-template>
 
<ng-template #priceRange>
  <div *ngIf="data$ | async as d" class="current-price" data-testing-id="current-price">
    {{ d.lowerPrice | ishPrice }} - {{ d.upperPrice | ishPrice }}
  </div>
</ng-template>