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
62
63
64
65
66
67
68
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
                  class="form-check-input"
                  type="radio"
                  [checked]="selectedWarrantySku ? selectedWarrantySku === warranty.id : !warranty.id"
                  [id]="'warranty_' + uuid + warranty.id"
                  [name]="'warranty_' + uuid"
                  [value]="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"
            data-testing-id="product-warranties"
            [attr.aria-label]="'product.warranty.heading.text' | translate"
            (change)="updateWarranty($event.target)"
          >
            <!-- generate all available warranties in a select box -->
            @for (warranty of warranties$ | async; track warranty.id) {
              <option
                [selected]="selectedWarrantySku ? selectedWarrantySku === warranty.id : warranty.id === ''"
                [value]="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>
  }
}