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
96
97
98
99
100
101
102
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<h2>{{ 'checkout.address.shipping.label' | translate }}</h2>
@let collapsed = collapseChange | async;
@if (shippingAddress$ | async; as address) {
  <div class="address-box">
    @let invoiceAndShippingEqual = basketInvoiceAndShippingAddressEqual$ | async;
    @if (invoiceAndShippingEqual === false) {
      <div class="float-end">
        <!-- edit shipping address -->
        @if (collapsed) {
          <button
            class="btn-tool btn-link"
            data-testing-id="edit-shipping-address-link"
            type="button"
            [title]="
              'checkout.address.update.title' | translate: { '0': 'checkout.address.shipping.label' | translate }
            "
            (click)="showAddressForm(address)"
          >
            <i class="bi bi-pencil-fill"></i>
          </button>
        }
        <!-- delete shipping address -->
        @if ((basketShippingAddressDeletable$ | async) && collapsed) {
          <button
            class="btn-tool btn-link"
            title="{{ 'checkout.address.delete.button.label' | translate }}"
            type="button"
            (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 (invoiceAndShippingEqual) {
      <p class="section" data-testing-id="sameAsInvoice">
        {{ '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 -->
@let addresses = addresses$ | async;
@if (addresses?.length) {
  <form [formGroup]="form">
    <formly-form [fields]="fields" [form]="form" />
  </form>
}
 
<!-- Add a new Shipping to address -->
@if (displayAddAddressLink$ | async) {
  <div class="row">
    <button
      aria-controls="shipping-address-panel"
      class="btn btn-link w-auto"
      data-testing-id="create-shipping-address-link"
      type="button"
      [attr.aria-expanded]="collapsed === false"
      (click)="showAddressForm()"
    >
      {{ 'checkout.create_shipping_address.link' | translate }}
    </button>
  </div>
}
 
<!-- shipping address form -->
<div data-testing-id="shipping-address-form" id="shipping-address-panel" [ngbCollapse]="collapsed">
  <ish-formly-customer-address-form
    [address]="editAddress"
    [resetForm]="collapsed"
    (cancelForm)="cancelEditAddress()"
    (save)="saveAddress($event)"
  />
</div>
 
@if (collapsed === false) {
  <ish-lazy-address-doctor />
}