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
3x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
@let warranties = warranties$ | async;
@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; 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>
}