All files / src/app/shared/components/checkout/basket-shipping-address-widget basket-shipping-address-widget.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
88
89
90
91
92
93
94
95
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<h2>{{ 'checkout.address.shipping.label' | translate }}</h2>
<ng-container *ngIf="shippingAddress$ | async as address">
  <div class="address-box">
    <ng-container *ngIf="(basketInvoiceAndShippingAddressEqual$ | async) === false">
      <div class="float-end">
        <!-- edit shipping address -->
        <button
          *ngIf="collapseChange | async"
          type="button"
          class="btn-tool btn-link"
          [title]="'checkout.address.update.title' | translate : { '0': 'checkout.address.shipping.label' | translate }"
          (click)="showAddressForm(address)"
          data-testing-id="edit-shipping-address-link"
        >
          <fa-icon [icon]="['fas', 'pencil-alt']" />
        </button>
 
        <!-- delete shipping address -->
        <button
          *ngIf="(basketShippingAddressDeletable$ | async) && (collapseChange | async)"
          type="button"
          class="btn-tool btn-link"
          title="{{ 'checkout.address.delete.button.label' | translate }}"
          (click)="modalDialog.show(address)"
        >
          <fa-icon [icon]="['fas', 'trash-alt']" />
        </button>
 
        <ish-modal-dialog
          #modalDialog
          [options]="{
            titleText: 'checkout.address.delete.confirmation.heading' | translate,
            confirmText: 'checkout.address.button.delete' | translate,
            rejectText: 'checkout.address.button.cancel' | translate
          }"
          (confirmed)="deleteAddress($event)"
        >
          <p>{{ 'checkout.address.delete.confirmation.text' | translate }}</p>
          <small class="text-body-secondary">{{
            'checkout.address.delete.confirmation.deletionhint' | translate
          }}</small>
        </ish-modal-dialog>
      </div>
 
      <!-- display shipping address -->
      <ish-address [address]="address" />
    </ng-container>
 
    <p *ngIf="basketInvoiceAndShippingAddressEqual$ | async" data-testing-id="sameAsInvoice" class="section">
      {{ 'checkout.same_as_billing_address.text' | translate }}
    </p>
 
    <p></p>
  </div>
 
  <p *ngIf="!address && showErrors" class="text-danger">
    {{ 'checkout.addresses.no_Selection.shipping.error' | translate }}
  </p>
</ng-container>
 
<!-- shipping address selection -->
<ng-container *ngIf="addresses$ | async as addresses">
  <form *ngIf="addresses.length" [formGroup]="form">
    <formly-form [form]="form" [fields]="fields" />
  </form>
</ng-container>
 
<!-- Add a new Shipping to address -->
<div *ngIf="displayAddAddressLink$ | async" class="row">
  <button
    type="button"
    class="btn btn-link w-auto"
    (click)="showAddressForm()"
    [attr.aria-expanded]="(collapseChange | async) === false"
    aria-controls="shipping-address-panel"
    data-testing-id="create-shipping-address-link"
  >
    {{ 'checkout.create_shipping_address.link' | translate }}
  </button>
</div>
 
<!-- shipping address form -->
<div id="shipping-address-panel" [ngbCollapse]="collapseChange | async" data-testing-id="shipping-address-form">
  <ish-formly-customer-address-form
    [address]="editAddress"
    [resetForm]="collapseChange | async"
    (save)="saveAddress($event)"
    (cancel)="cancelEditAddress()"
  />
</div>
 
<ng-container *ngIf="(collapseChange | async) === false">
  <ish-lazy-address-doctor />
</ng-container>