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
63
64
65
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<h2>{{ 'checkout.address.billing.label' | translate }}</h2>
@if (invoiceAddress$ | async; as address) {
  <div class="address-box">
    <!-- edit invoice address -->
    @if (collapseChange | async) {
      <button
        class="btn-tool btn-link float-end"
        data-testing-id="edit-invoice-address-link"
        type="button"
        [title]="'checkout.address.update.title' | translate: { '0': 'checkout.address.billing.label' | translate }"
        (click)="showAddressForm(address)"
      >
        <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 [fields]="fields" [form]="form" />
    </form>
  }
}
 
<!-- Add a new Invoice to address -->
@if ((collapseChange | async) && (isLoggedIn$ | async)) {
  <div class="row">
    <button
      aria-controls="invoice-address-panel"
      class="btn btn-link w-auto"
      data-testing-id="create-invoice-address-link"
      type="button"
      [attr.aria-expanded]="(collapseChange | async) === false"
      (click)="showAddressForm()"
    >
      {{ 'checkout.create_invoice_address.link' | translate }}
    </button>
  </div>
}
 
<!-- invoice address form -->
<div data-testing-id="invoice-address-form" id="invoice-address-panel" [ngbCollapse]="collapseChange | async">
  <ish-formly-customer-address-form
    [address]="editAddress"
    [extension]="(isLoggedIn$ | async) === false"
    [resetForm]="collapseChange | async"
    (cancelForm)="cancelEditAddress()"
    (save)="saveAddress($event)"
  />
</div>
 
@if ((collapseChange | async) === false) {
  <ish-lazy-address-doctor />
}