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
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<h2>{{ 'checkout.address.shipping.label' | translate }}</h2>
@if (shippingAddress$ | async; as address) {
<div class="address-box">
  @if ((basketInvoiceAndShippingAddressEqual$ | async) === false) {
  <div class="float-end">
    <!-- edit shipping address -->
    @if (collapseChange | async) {
    <button
      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"
    >
      <i class="bi bi-pencil-fill"></i>
    </button>
    }
    <!-- delete shipping address -->
    @if ((basketShippingAddressDeletable$ | async) && (collapseChange | async)) {
    <button
      type="button"
      class="btn-tool btn-link"
      title="{{ 'checkout.address.delete.button.label' | translate }}"
      (click)="modalDialog.show(address)"
    >
      <i class="bi bi-trash-fill"></i>
    </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" />
  } @if (basketInvoiceAndShippingAddressEqual$ | async) {
  <p data-testing-id="sameAsInvoice" class="section">
    {{ 'checkout.same_as_billing_address.text' | translate }}
  </p>
  }
  <p></p>
</div>
@if (!address && showErrors) {
<p class="text-danger">
  {{ 'checkout.addresses.no_Selection.shipping.error' | translate }}
</p>
} }
 
<!-- shipping address selection -->
@if (addresses$ | async; as addresses) { @if (addresses.length) {
<form [formGroup]="form">
  <formly-form [form]="form" [fields]="fields" />
</form>
} }
 
<!-- Add a new Shipping to address -->
@if (displayAddAddressLink$ | async) {
<div 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>
 
@if ((collapseChange | async) === false) {
<ish-lazy-address-doctor />
}