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
      aria-controls="basket-custom-fields-input"
      class="btn btn-link btn-link-with-icon"
      data-testing-id="basket-custom-fields-toggle-link"
      type="button"
      [attr.aria-expanded]="!collapsed"
      (click)="collapsed = !collapsed"
    >
      {{
        (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 [fields]="customFields$ | async" [form]="form" />
        <div class="row">
          <div class="col-12 offset-md-4 col-md-8">
            <button class="btn btn-primary" type="submit">
              {{
                (editMode === 'edit'
                  ? 'checkout.custom-fields.save.button.label'
                  : 'checkout.custom-fields.add.button.label'
                ) | translate
              }}
            </button>
            <button class="btn btn-secondary" type="button" (click)="cancel()">
              {{ 'checkout.custom-fields.cancel.button.label' | translate }}
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>
}