All files / src/app/pages/checkout-shipping checkout-shipping-page.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
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<div data-testing-id="checkout-shipping-page">
  <h1>
    <span id="page-main-content" tabindex="-1">{{ 'checkout.shipping.pagetitle' | translate }}</span>
  </h1>
 
  <div class="row">
    <!-- Messages -->
    <div class="col-md-12">
      <ng-container *ngIf="basketError$ | async as error">
        <ish-error-message [error]="error" [toast]="false" />
        <ish-basket-error-message [error]="error" />
      </ng-container>
      <ish-basket-validation-results />
    </div>
    <!-- Shipping method form-->
    <div *ngIf="shippingMethods$ | async as shippingMethods" class="col-md-12 col-lg-8">
      <div class="section">
        <div *ngIf="shippingMethods.length; else noShippingMethods" class="shipping-methods">
          <div *ngIf="(basketError$ | async) === undefined && nextDisabled" role="alert" class="alert alert-danger">
            {{ 'checkout.shipping_method.no_Selection.error' | translate }}
          </div>
          <h2 class="h3">{{ 'checkout.shipping_method.selection.heading' | translate }}</h2>
          <ish-checkout-shipping />
        </div>
 
        <ng-template #noShippingMethods>
          <div role="alert" class="alert alert-danger">{{ 'checkout.shipping.no_methods.message' | translate }}</div>
          <a routerLink="/basket">{{ 'checkout.general.back_to_cart.button.label' | translate }}</a>
        </ng-template>
      </div>
 
      <ng-container *ngIf="isDesiredDeliveryDate$ | async">
        <ish-basket-desired-delivery-date [basket]="basket$ | async" />
      </ng-container>
 
      <ng-container *ngIf="isBusinessCustomer$ | async">
        <ish-basket-order-reference [basket]="basket$ | async" />
      </ng-container>
 
      <ng-container *ngIf="'shipping.messageToMerchant' | ishServerSetting">
        <ish-basket-merchant-message [basket]="basket$ | async" />
      </ng-container>
    </div>
    <!-- basket summary -->
    <div class="col-md-12 col-lg-4 order-summary" *ngIf="basket$ | async as basket">
      <h2>{{ 'checkout.order_details.heading' | translate }}</h2>
 
      <ish-basket-address-summary [basket]="basket" />
 
      <ish-basket-recurrence-summary [recurrence]="basket.recurrence" />
 
      <ish-basket-items-summary [basket]="basket" />
 
      <div class="cost-summary">
        <ish-basket-cost-summary [totals]="basket.totals" />
 
        <div class="d-grid">
          <button class="btn btn-lg btn-primary" type="button" [disabled]="nextDisabled" (click)="goToNextStep()">
            {{ 'checkout.button.label' | translate }}
          </button>
        </div>
      </div>
      <!-- Privacy policy link -->
      <span
        [ishServerHtml]="
          'checkout.widget.security_privacy_policy.link'
            | translate : { '0': 'page://page.privacyPolicy.pagelet2-Page' }
        "
      ></span>
    </div>
 
    <ish-loading *ngIf="loading$ | async" />
  </div>
</div>