adapt to new ui

src/app/core/facades/checkout.facade.ts

@@ -126,10 +126,10 @@ export class CheckoutFacade {
   }
 
   updateBasketItem(update: LineItemUpdate) {
-    if (update.quantity) {
-      this.store.dispatch(updateBasketItem({ lineItemUpdate: update }));
-    } else {
+    if (update.quantity === 0) {
       this.store.dispatch(deleteBasketItem({ itemId: update.itemId }));
+    } else {
+      this.store.dispatch(updateBasketItem({ lineItemUpdate: update }));
     }
   }
 

src/app/core/store/customer/basket/basket-items.effects.ts

@@ -196,7 +196,7 @@ export class BasketItemsEffects {
       itemUpdate.customFields = customFieldDefinitions.map(({ name, type }) => ({
         name,
         type,
-        value: update.customFields[name],
+        value: update.customFields[name] || '',
       }));
     }
 

src/app/shared/components/custom-fields/custom-fields-view/custom-fields-view.component.html

@@ -1,8 +1,8 @@
 <div class="custom-fields-view">
-  <div *ngFor="let field of data$ | async">
-    <label [for]="'basket-custom-attribute-' + field.name">{{ field.displayName }}</label
-    ><span [class.no-value]="!field.value" [id]="'basket-custom-attribute-' + field.name">{{
-      field.value || ('checkout.custom-field.no-value' | translate)
-    }}</span>
+  <div *ngFor="let field of data$ | async" class="custom-field">
+    <label [for]="'basket-custom-attribute-' + field.name">{{ field.displayName }}</label>
+    <span [class.no-value]="!field.value" [id]="'basket-custom-attribute-' + field.name">
+      {{ field.value || ('checkout.custom-field.no-value' | translate) }}
+    </span>
   </div>
 </div>

src/app/shared/components/custom-fields/custom-fields-view/custom-fields-view.component.scss

@@ -2,9 +2,11 @@
 @import 'bootstrap/scss/functions';
 
 .custom-fields-view {
-  display: flex;
-  flex-direction: column;
-  gap: divide($space-default, 3);
+  .custom-field {
+    &:last-of-type {
+      margin-bottom: divide($space-default * 2, 3);
+    }
+  }
 
   label {
     padding-right: divide($space-default, 3);

src/app/shared/components/line-item/line-item-edit-dialog/line-item-edit-dialog.component.html

@@ -0,0 +1,37 @@
+<div class="container line-item-edit-dialog">
+  <ish-loading *ngIf="loading$ | async" />
+
+  <div *ngIf="variation$ | async as variation" class="row">
+    <!-- right box -->
+    <div class="col-12 col-md">
+      <div class="text-center"><ish-product-image imageType="M" /></div>
+    </div>
+
+    <!-- left box -->
+    <div class="col-12 col-md product-info">
+      <!-- sku -->
+      <ish-product-id />
+
+      <!-- price -->
+      <div class="current-price">{{ variationSalePrice$ | async | ishPrice }}</div>
+
+      <!-- Availability -->
+      <ish-product-inventory />
+
+      <!-- select (variation) -->
+      <div class="product-variation-container">
+        <ish-product-variation-select />
+      </div>
+
+      <!-- input (quantity) -->
+      <div class="form-group">
+        <div class="row">
+          <ish-product-quantity-label for="line-item-edit-quantity" class="col" />
+          <div class="col">
+            <ish-product-quantity elementId="line-item-edit-quantity" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/shared/components/line-item/line-item-edit-dialog/line-item-edit-dialog.component.spec.ts

@@ -0,0 +1,86 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MockComponent, MockPipe } from 'ng-mocks';
+import { EMPTY, of } from 'rxjs';
+import { instance, mock, when } from 'ts-mockito';
+
+import { ProductContextFacade } from 'ish-core/facades/product-context.facade';
+import { PricePipe } from 'ish-core/models/price/price.pipe';
+import { ProductView } from 'ish-core/models/product-view/product-view.model';
+import { ProductCompletenessLevel } from 'ish-core/models/product/product.model';
+import { findAllCustomElements } from 'ish-core/utils/dev/html-query-utils';
+import { LoadingComponent } from 'ish-shared/components/common/loading/loading.component';
+import { ProductIdComponent } from 'ish-shared/components/product/product-id/product-id.component';
+import { ProductImageComponent } from 'ish-shared/components/product/product-image/product-image.component';
+import { ProductInventoryComponent } from 'ish-shared/components/product/product-inventory/product-inventory.component';
+import { ProductQuantityLabelComponent } from 'ish-shared/components/product/product-quantity-label/product-quantity-label.component';
+import { ProductQuantityComponent } from 'ish-shared/components/product/product-quantity/product-quantity.component';
+import { ProductVariationSelectComponent } from 'ish-shared/components/product/product-variation-select/product-variation-select.component';
+
+import { LineItemEditDialogComponent } from './line-item-edit-dialog.component';
+
+describe('Line Item Edit Dialog Component', () => {
+  let component: LineItemEditDialogComponent;
+  let fixture: ComponentFixture<LineItemEditDialogComponent>;
+  let element: HTMLElement;
+  let context: ProductContextFacade;
+
+  beforeEach(async () => {
+    context = mock(ProductContextFacade);
+
+    await TestBed.configureTestingModule({
+      declarations: [
+        LineItemEditDialogComponent,
+        MockComponent(LoadingComponent),
+        MockComponent(ProductIdComponent),
+        MockComponent(ProductImageComponent),
+        MockComponent(ProductInventoryComponent),
+        MockComponent(ProductQuantityComponent),
+        MockComponent(ProductQuantityLabelComponent),
+        MockComponent(ProductVariationSelectComponent),
+        MockPipe(PricePipe),
+      ],
+      providers: [{ provide: ProductContextFacade, useFactory: () => instance(context) }],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LineItemEditDialogComponent);
+    component = fixture.componentInstance;
+    element = fixture.nativeElement;
+
+    when(context.select('product')).thenReturn(
+      of({
+        type: 'VariationProduct',
+        sku: 'SKU',
+        variableVariationAttributes: [],
+        available: true,
+        completenessLevel: ProductCompletenessLevel.List,
+      } as ProductView)
+    );
+    when(context.select('prices')).thenReturn(EMPTY);
+
+    when(context.select('loading')).thenReturn(of(false));
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+    expect(element).toBeTruthy();
+    expect(() => fixture.detectChanges()).not.toThrow();
+  });
+
+  it('should give correct product id of variation to product id component', () => {
+    fixture.detectChanges();
+    expect(element.querySelector('ish-product-id')).toMatchInlineSnapshot(`<ish-product-id></ish-product-id>`);
+  });
+
+  it('should display ish-components on the container', () => {
+    fixture.detectChanges();
+    expect(findAllCustomElements(element)).toIncludeAllMembers(['ish-product-quantity', 'ish-product-image']);
+  });
+
+  it('should display loading-components on the container', () => {
+    when(context.select('loading')).thenReturn(of(true));
+    fixture.detectChanges();
+    expect(findAllCustomElements(element)).toIncludeAllMembers(['ish-product-quantity', 'ish-loading']);
+  });
+});

src/app/shared/components/line-item/line-item-edit-dialog/line-item-edit-dialog.component.ts

@@ -0,0 +1,29 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { Observable, map } from 'rxjs';
+
+import { ProductContextFacade } from 'ish-core/facades/product-context.facade';
+import { Price } from 'ish-core/models/price/price.model';
+import { ProductView } from 'ish-core/models/product-view/product-view.model';
+
+/**
+ * The Line Item Edit Dialog Component displays an edit-dialog of a line items to edit quantity and variation.
+ */
+@Component({
+  selector: 'ish-line-item-edit-dialog',
+  templateUrl: './line-item-edit-dialog.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LineItemEditDialogComponent implements OnInit {
+  variation$: Observable<ProductView>;
+  variationSalePrice$: Observable<Price>;
+  loading$: Observable<boolean>;
+
+  constructor(private context: ProductContextFacade) {}
+
+  ngOnInit() {
+    this.variation$ = this.context.select('product');
+    this.variationSalePrice$ = this.context.select('prices').pipe(map(prices => prices?.salePrice));
+
+    this.loading$ = this.context.select('loading');
+  }
+}

src/app/shared/components/line-item/line-item-edit/line-item-edit.component.html

@@ -1,67 +1,24 @@
-<ng-container *ngIf="select('visible') | async">
+<ng-container *ngIf="product$ | async as product">
   <button
+    *ngIf="product.type === 'VariationProduct'"
     type="button"
     (click)="show()"
-    class="line-item-edit-link btn btn-link btn-link-action btn-tool"
+    class="line-item-edit-link btn btn-link btn-link-action"
     rel="nofollow"
     title="{{ 'checkout.variation.edit.button.label' | translate }}"
   >
-    <fa-icon [icon]="['fas', 'pencil']" />
+    {{ 'checkout.variation.edit.button.label' | translate }}
   </button>
-</ng-container>
-
-<ish-modal-dialog
-  #modalDialog
-  [options]="{
-    confirmText: 'shopping_cart.variation.save.button.label' | translate,
-    rejectText: 'shopping_cart.button.cancel' | translate,
-    size: 'lg'
-  }"
->
-  <ng-container *ngIf="select('visible') | async">
-    <div class="container line-item-edit-dialog">
-      <ish-loading *ngIf="select('loading') | async" />
-
-      <div class="row">
-        <!-- right box -->
-        <div class="col-12 col-md">
-          <div class="text-center"><ish-product-image imageType="M" /></div>
-        </div>
-
-        <!-- left box -->
-        <div class="col-12 col-md product-info">
-          <!-- sku -->
-          <ish-product-id />
-
-          <!-- price -->
-          <div class="current-price">{{ select('lineItem', 'singleBasePrice') | async | ishPrice }}</div>
 
-          <!-- Availability -->
-          <ish-product-inventory />
-
-          <!-- select (variation) -->
-          <div class="product-variation-container">
-            <ish-product-variation-select
-              *ngIf="(select('variationEditable') | async) === true; else variationDisplay"
-            />
-            <ng-template #variationDisplay>
-              <ish-product-variation-display />
-            </ng-template>
-          </div>
-
-          <!-- input (quantity) -->
-          <div class="form-group">
-            <div class="row">
-              <ish-product-quantity-label for="line-item-edit-quantity" class="col" />
-              <div class="col">
-                <ish-product-quantity elementId="line-item-edit-quantity" />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <ish-custom-fields-formly [form]="customFieldsForm" [fields]="select('customFields') | async" />
-    </div>
-  </ng-container>
-</ish-modal-dialog>
+  <ish-modal-dialog
+    #modalDialog
+    [options]="{
+      titleText: product.name,
+      confirmText: 'shopping_cart.variation.save.button.label' | translate,
+      rejectText: 'shopping_cart.button.cancel' | translate,
+      size: 'lg'
+    }"
+  >
+    <ish-line-item-edit-dialog />
+  </ish-modal-dialog>
+</ng-container>

src/app/shared/components/line-item/line-item-edit/line-item-edit.component.spec.ts

@@ -1,12 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { TranslateModule } from '@ngx-translate/core';
-import { MockComponent } from 'ng-mocks';
-import { EMPTY } from 'rxjs';
-import { anyString, instance, mock, when } from 'ts-mockito';
+import { instance, mock } from 'ts-mockito';
 
-import { AppFacade } from 'ish-core/facades/app.facade';
 import { ProductContextFacade } from 'ish-core/facades/product-context.facade';
-import { ModalDialogComponent } from 'ish-shared/components/common/modal-dialog/modal-dialog.component';
 
 import { LineItemEditComponent } from './line-item-edit.component';
 
@@ -16,25 +11,10 @@ describe('Line Item Edit Component', () => {
   let element: HTMLElement;
 
   beforeEach(async () => {
-    const appFacade = mock(AppFacade);
-    when(appFacade.serverSetting$(anyString())).thenReturn(EMPTY);
-    when(appFacade.customFieldsForScope$(anyString())).thenReturn(EMPTY);
-
-    const context = mock(ProductContextFacade);
-    when(context.select(anyString())).thenReturn(EMPTY);
-    when(context.select(anyString(), anyString())).thenReturn(EMPTY);
-
     await TestBed.configureTestingModule({
-      imports: [TranslateModule.forRoot()],
-      declarations: [LineItemEditComponent, MockComponent(ModalDialogComponent)],
-      providers: [{ provide: AppFacade, useFactory: () => instance(appFacade) }],
-    })
-      .overrideComponent(LineItemEditComponent, {
-        set: {
-          providers: [{ provide: ProductContextFacade, useFactory: () => instance(context) }],
-        },
-      })
-      .compileComponents();
+      declarations: [LineItemEditComponent],
+      providers: [{ provide: ProductContextFacade, useFactory: () => instance(mock(ProductContextFacade)) }],
+    }).compileComponents();
   });
 
   beforeEach(() => {