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
3x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<ng-container *ngIf="warranties$ | async as warranties">
  <div class="product-warranty" *ngIf="warranties.length">
    <ng-container [ngSwitch]="viewType">
      <!-- default display option is radio-buttons -->
      <ng-template ngSwitchDefault>
        <div class="product-warranty-title">{{ 'product.warranty.heading.text' | translate }}:</div>
        <div class="product-warranty-list" data-testing-id="product-warranties">
          <div class="mb-2" *ngFor="let warranty of warranties">
            <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
              }}<span *ngIf="warranty.id"
                ><span class="product-warranty-price"> {{ warranty.price | ishPrice }}</span>
                <ish-product-warranty-details [warranty]="warranty"
              /></span>
            </label>
          </div>
        </div>
      </ng-template>
 
      <!-- viewType select-box -->
      <ng-template ngSwitchCase="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 -->
          <option
            *ngFor="let warranty of warranties$ | async"
            [value]="warranty.id"
            [selected]="selectedWarrantySku ? selectedWarrantySku === warranty.id : warranty.id === ''"
          >
            {{ warranty.name }}<span *ngIf="warranty.id"> - {{ warranty.price | ishPrice }}</span>
          </option>
        </select>
        <ish-product-warranty-details
          *ngIf="selectedWarrantySku"
          [warranty]="getSelectedWarranty$(selectedWarrantySku) | async"
        />
      </ng-template>
      <ng-template ngSwitchCase="display">
        <ng-container *ngIf="getSelectedWarranty$(selectedWarrantySku) | async as selectedWarranty">
          {{ selectedWarranty.name }}
          <ish-product-warranty-details [warranty]="selectedWarranty" />
        </ng-container>
      </ng-template>
    </ng-container>
  </div>
</ng-container>