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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
@if (totals) {
<div 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 -->
    @if (totals.valueRebates?.length > 0) { @for (rebate of totals.valueRebates; track rebate.id) { @if
    (rebate?.promotionId) {
    <dt class="col-6">
      <ish-basket-promotion [rebate]="rebate" />
    </dt>
    }
    <dd class="col-6">{{ invert(rebate.amount) | ishPrice }}</dd>
    } }
    <!-- Shipping -->
    <dt class="col-6">
      @if (totals.isEstimated) {
      <span>{{ 'checkout.cart.estimated_shipping_handling.label' | translate }}</span>
      } @if (!totals.isEstimated) {
      <span>{{ 'checkout.order.shipping.label' | translate }}</span>
      }
    </dt>
    <dd class="col-6">{{ totals.undiscountedShippingTotal | ishPrice }}</dd>
    <!-- Shipping promotions -->
    @if (totals.shippingRebates?.length > 0) { @for (rebate of totals.shippingRebates; track rebate.id) {
    <dt class="col-6">
      <ish-basket-promotion [rebate]="rebate" />
    </dt>
    <dd class="col-6">{{ invert(rebate.amount) | ishPrice }}</dd>
    } }
    <!-- Item Surcharges -->
    @for (surcharge of totals.itemSurchargeTotalsByType; track surcharge.displayName) {
    <ng-container *ngTemplateOutlet="surchargeItemTemplate; context: { surcharge: surcharge }" />
    }
    <!-- Bucket Surcharges -->
    @for (surcharge of totals.bucketSurchargeTotalsByType; track surcharge.displayName) {
    <ng-container *ngTemplateOutlet="surchargeItemTemplate; context: { surcharge: surcharge }" />
    }
    <!-- Payment costs -->
    @if (hasPaymentCostsTotal) {
    <dt class="col-6">{{ 'checkout.cart.payment_cost.label' | translate }}</dt>
    <dd class="col-6">{{ totals.paymentCostsTotal | ishPrice }}</dd>
    }
    <!-- Tax -->
    @if (totals.taxTotal?.value) {
    <dt class="col-6">{{ taxTranslation$ | async | translate }}</dt>
    <dd class="col-6" data-testing-id="basket-tax">{{ totals.taxTotal | ishPrice }}</dd>
    }
    <!-- Cart total -->
    <dt class="col-6 total-price">
      @if (totals.isEstimated) {
      <span>{{ 'checkout.cart.estimated_total.label' | translate }}</span>
      } @if (!totals.isEstimated) {
      <span>{{ 'checkout.order.total_cost.label' | translate }}</span>
      }
    </dt>
    <dd class="col-6 total-price">{{ totals.total | ishPrice : 'gross' }}</dd>
 
    @if (getPaypalPageType() === 'cart' ? 'payment.paypal.payLaterPreferences.PayLaterMessagingCartEnabled' :
    'payment.paypal.payLaterPreferences.PayLaterMessagingPaymentEnabled' | ishServerSetting) {
    <dd class="col-12">
      <ish-payment-paypal [pageType]="getPaypalPageType()" />
    </dd>
    }
  </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 }}<i class="bi bi-info-circle-fill"></i>
    </button>
  </dt>
  <dd class="col-6">{{ surcharge.amount | ishPrice }}</dd>
</ng-template>