All files / src/app/shared/components/basket/basket-cost-summary basket-cost-summary.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
85
86
87
10x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<div *ngIf="totals" class="clearfix">
  <dl class="row dl-horizontal">
    <!-- SubTotal -->
    <dt class="col-6">{{ 'checkout.cart.subtotal.heading' | translate }}</dt>
    <dd class="col-6" data-testing-id="basket-subtotal">{{ totals.itemTotal | ishPrice }}</dd>
 
    <!-- list all applied order level promotions -->
    <ng-container *ngIf="totals.valueRebates?.length > 0">
      <ng-container *ngFor="let rebate of totals.valueRebates">
        <dt *ngIf="rebate?.promotionId" class="col-6">
          <ish-basket-promotion [rebate]="rebate" />
        </dt>
        <dd class="col-6">{{ invert(rebate.amount) | ishPrice }}</dd>
      </ng-container>
    </ng-container>
 
    <!-- Shipping -->
    <dt class="col-6">
      <span *ngIf="totals.isEstimated">{{ 'checkout.cart.estimated_shipping_handling.label' | translate }}</span>
      <span *ngIf="!totals.isEstimated">{{ 'checkout.order.shipping.label' | translate }}</span>
    </dt>
    <dd class="col-6">{{ totals.undiscountedShippingTotal | ishPrice }}</dd>
 
    <!-- Shipping promotions -->
    <ng-container *ngIf="totals.shippingRebates?.length > 0">
      <ng-container *ngFor="let rebate of totals.shippingRebates">
        <dt class="col-6">
          <ish-basket-promotion [rebate]="rebate" />
        </dt>
        <dd class="col-6">{{ invert(rebate.amount) | ishPrice }}</dd>
      </ng-container>
    </ng-container>
 
    <!-- Item Surcharges -->
    <ng-container *ngFor="let surcharge of totals.itemSurchargeTotalsByType">
      <ng-container *ngTemplateOutlet="surchargeItemTemplate; context: { surcharge: surcharge }" />
    </ng-container>
 
    <!-- Bucket Surcharges -->
    <ng-container *ngFor="let surcharge of totals.bucketSurchargeTotalsByType">
      <ng-container *ngTemplateOutlet="surchargeItemTemplate; context: { surcharge: surcharge }" />
    </ng-container>
 
    <!-- Payment costs -->
    <ng-container *ngIf="hasPaymentCostsTotal">
      <dt class="col-6">{{ 'checkout.cart.payment_cost.label' | translate }}</dt>
      <dd class="col-6">{{ totals.paymentCostsTotal | ishPrice }}</dd>
    </ng-container>
 
    <!-- Tax -->
    <ng-container *ngIf="totals.taxTotal?.value">
      <dt class="col-6">{{ taxTranslation$ | async | translate }}</dt>
      <dd class="col-6" data-testing-id="basket-tax">{{ totals.taxTotal | ishPrice }}</dd>
    </ng-container>
 
    <!-- Cart total -->
    <dt class="col-6 total-price">
      <span *ngIf="totals.isEstimated">{{ 'checkout.cart.estimated_total.label' | translate }}</span>
      <span *ngIf="!totals.isEstimated">{{ 'checkout.order.total_cost.label' | translate }}</span>
    </dt>
    <dd class="col-6 total-price">{{ totals.total | ishPrice : 'gross' }}</dd>
    <ng-container *ngIf="showPaypalMessages$ | async as messaging">
      <dd *ngIf="messaging.preference | ishServerSetting" class="col-12">
        <ish-payment-paypal-messages [pageType]="messaging.type" />
      </dd>
    </ng-container>
  </dl>
</div>
 
<!-- surcharge outlet template -->
<ng-template #surchargeItemTemplate let-surcharge="surcharge">
  <ng-template #SurchargeDescription> <span [innerHTML]="surcharge.description"></span> </ng-template>
  <dt class="col-6">
    {{ surcharge.displayName }}
    <button
      type="button"
      class="btn btn-link details-tooltip"
      [ngbPopover]="SurchargeDescription"
      [popoverTitle]="surcharge.displayName"
      placement="top"
    >
      {{ 'shopping_cart.detail.text' | translate }}<fa-icon [icon]="['fas', 'info-circle']" />
    </button>
  </dt>
  <dd class="col-6">{{ surcharge.amount | ishPrice }}</dd>
</ng-template>