All files / src/app/shared/components/product/product-warranty product-warranty.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
3x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
@if (warranties$ | async; as warranties) { @if (warranties.length) {
<div class="product-warranty">
  @switch (viewType) {
  <!-- default display option is radio-buttons -->
  @default {
  <div class="product-warranty-title">{{ 'product.warranty.heading.text' | translate }}:</div>
  <div class="product-warranty-list" data-testing-id="product-warranties">
    @for (warranty of warranties; track warranty.id) {
    <div class="mb-2">
      <input
        type="radio"
        [id]="'warranty_' + uuid + warranty.id"
        [name]="'warranty_' + uuid"
        [value]="warranty.id"
        class="form-check-input"
        [checked]="selectedWarrantySku ? selectedWarrantySku === warranty.id : !warranty.id"
        (change)="updateWarranty(warranty.id)"
      />
      <label class="form-check-label" [for]="'warranty_' + uuid + warranty.id">
        {{ warranty.name }}
        @if (warranty.id) {
        <span
          ><span class="product-warranty-price"> {{ warranty.price | ishPrice }}</span>
          <ish-product-warranty-details [warranty]="warranty"
        /></span>
        }
      </label>
    </div>
    }
  </div>
  }
  <!-- viewType select-box -->
  @case ('select') {
  <select
    class="form-control d-inline-block w-auto"
    [attr.aria-label]="'product.warranty.heading.text' | translate"
    (change)="updateWarranty($event.target)"
    data-testing-id="product-warranties"
  >
    <!-- generate all available warranties in a select box -->
    @for (warranty of warranties$ | async; track warranty.id) {
    <option
      [value]="warranty.id"
      [selected]="selectedWarrantySku ? selectedWarrantySku === warranty.id : warranty.id === ''"
    >
      {{ warranty.name }}
      @if (warranty.id) {
      <span> - {{ warranty.price | ishPrice }}</span>
      }
    </option>
    }
  </select>
  @if (selectedWarrantySku) {
  <ish-product-warranty-details [warranty]="getSelectedWarranty$(selectedWarrantySku) | async" />
  } } @case ('display') { @if (getSelectedWarranty$(selectedWarrantySku) | async; as selectedWarranty) {
  {{ selectedWarranty.name }}
  <ish-product-warranty-details [warranty]="selectedWarranty" />
  } } }
</div>
} }