All files / src/app/shared/components/checkout/basket-invoice-address-widget basket-invoice-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
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<h2>{{ 'checkout.address.billing.label' | translate }}</h2>
@if (invoiceAddress$ | async; as address) {
<div class="address-box">
  <!-- edit invoice address -->
  @if (collapseChange | async) {
  <button
    type="button"
    class="btn-tool btn-link float-end"
    [title]="'checkout.address.update.title' | translate : { '0': 'checkout.address.billing.label' | translate }"
    (click)="showAddressForm(address)"
    data-testing-id="edit-invoice-address-link"
  >
    <i class="bi bi-pencil-fill"></i>
  </button>
  }
  <!-- display invoice address -->
  <ish-address [address]="address" [displayEmail]="true" />
</div>
@if (!address && showErrors) {
<p class="text-danger">
  {{ 'checkout.addresses.no_Selection.invoice.error' | translate }}
</p>
} }
 
<!-- invoice address selection -->
@if (addresses$ | async; as addresses) { @if (addresses.length) {
<form [formGroup]="form">
  <formly-form [form]="form" [fields]="fields" />
</form>
} }
 
<!-- Add a new Invoice to address -->
@if ((collapseChange | async) && (isLoggedIn$ | async)) {
<div class="row">
  <button
    type="button"
    class="btn btn-link w-auto"
    (click)="showAddressForm()"
    [attr.aria-expanded]="(collapseChange | async) === false"
    aria-controls="invoice-address-panel"
    data-testing-id="create-invoice-address-link"
  >
    {{ 'checkout.create_invoice_address.link' | translate }}
  </button>
</div>
}
 
<!-- invoice address form -->
<div id="invoice-address-panel" [ngbCollapse]="collapseChange | async" data-testing-id="invoice-address-form">
  <ish-formly-customer-address-form
    [address]="editAddress"
    [resetForm]="collapseChange | async"
    [extension]="(isLoggedIn$ | async) === false"
    (save)="saveAddress($event)"
    (cancel)="cancelEditAddress()"
  />
</div>
 
@if ((collapseChange | async) === false) {
<ish-lazy-address-doctor />
}