All files / src/app/shared/components/basket/basket-custom-fields basket-custom-fields.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
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
@if ((visible$ | async) && (editMode$ | async); as editMode) {
<div class="section" data-testing-id="basket-custom-fields">
  <h2 class="h3">{{ 'shopping_cart.custom_fields.heading' | translate }}</h2>
  @if (collapsed) {
  <ish-custom-fields-view [fields]="customFields$ | async" />
  }
  <button
    type="button"
    class="btn btn-link btn-link-with-icon"
    [attr.aria-expanded]="!collapsed"
    aria-controls="basket-custom-fields-input"
    (click)="collapsed = !collapsed"
    data-testing-id="basket-custom-fields-toggle-link"
  >
    {{
      (editMode === 'edit'
        ? 'checkout.custom-fields.basket.edit.link.label'
        : 'checkout.custom-fields.basket.add.link.label'
      ) | translate
    }}
    <i class="bi" [ngClass]="collapsed ? 'bi-chevron-down' : 'bi-chevron-up'"></i>
  </button>
  <div id="basket-custom-fields-input" [ngbCollapse]="collapsed">
    <form [formGroup]="form" (ngSubmit)="submit()">
      <ish-custom-fields-formly [form]="form" [fields]="customFields$ | async" />
      <div class="row">
        <div class="col-12 offset-md-4 col-md-8">
          <button type="submit" class="btn btn-primary">
            {{
              (editMode === 'edit'
                ? 'checkout.custom-fields.save.button.label'
                : 'checkout.custom-fields.add.button.label'
              ) | translate
            }}
          </button>
          <button (click)="cancel()" type="button" class="btn btn-secondary">
            {{ 'checkout.custom-fields.cancel.button.label' | translate }}
          </button>
        </div>
      </div>
    </form>
  </div>
</div>
}