bug fixing after order templates review

e2e/cypress/integration/specs/extras/order-templates-management.b2b.e2e-spec.ts

@@ -107,7 +107,7 @@ describe('Order Template MyAccount Functionality', () => {
     at(OrderTemplatesDetailsPage, page => {
       page.moveProductToOrderTemplate(_.product1, anotherOrderTemplate);
       cy.wait(500);
-      page.OrderTemplateTitle.should('equal', anotherOrderTemplate);
+      page.OrderTemplateTitle.should('contain', anotherOrderTemplate);
       page.getOrderTemplateItemById(_.product1).should('exist');
       OrderTemplatesDetailsPage.navigateToOverviewPage();
     });

e2e/cypress/integration/specs/extras/order-templates-shopping.b2b.e2e-spec.ts

@@ -69,11 +69,12 @@ describe('Order Template Shopping Experience Functionality', () => {
   it('user adds an order template from order template detail page to cart', () => {
     at(OrderTemplatesDetailsPage, page => {
       page.addOrderTemplateToBasket(_.product1, 4);
-      cy.wait(1500);
+      cy.wait(2000);
       page.header.miniCart.goToCart();
     });
     at(CartPage, page => {
       page.lineItems.contains(_.product1).should('exist');
+      page.lineItems.contains(_.product2).should('exist');
       page.lineItems
         .contains(_.product1)
         .closest('[data-testing-id="product-list-item"]')
@@ -113,7 +114,7 @@ describe('Order Template Shopping Experience Functionality', () => {
     });
     at(OrderTemplatesOverviewPage, page => {
       page.addOrderTemplateToCart(accountOrderTemplate);
-      cy.wait(1500);
+      cy.wait(2000);
       page.header.miniCart.text.should('contain', '11 items');
       page.header.miniCart.goToCart();
     });
@@ -129,7 +130,7 @@ describe('Order Template Shopping Experience Functionality', () => {
   it('user adds only the selected product in order template details', () => {
     at(CartPage, page => {
       page.lineItem(0).remove();
-      cy.wait(1500);
+      cy.wait(2000);
       page.addProductToOrderTemplate();
       page.addToOrderTemplate.addProductToOrderTemplateFromPage(accountOrderTemplate, true);
     });

src/app/extensions/order-templates/models/order-template/order-template.mapper.ts

@@ -5,7 +5,7 @@ import { OrderTemplate, OrderTemplateItem } from './order-template.model';
 
 @Injectable({ providedIn: 'root' })
 export class OrderTemplateMapper {
-  private static parseIDfromURI(uri: string): string {
+  private static parseIdFromURI(uri: string): string {
     const match = /wishlists[^\/]*\/([^\?]*)/.exec(uri);
     if (match) {
       return match[1];
@@ -32,13 +32,14 @@ export class OrderTemplateMapper {
             creationDate: Number(item.creationDate),
             desiredQuantity: {
               value: item.desiredQuantity.value,
-              // TBD: is the unit necessarry?
+              // TBD: is the unit necessary?
               // unit: item.desiredQuantity.unit,
             },
           }));
       } else {
         items = [];
       }
+
       return {
         id: orderTemplateId,
         title: orderTemplateData.title,
@@ -65,7 +66,7 @@ export class OrderTemplateMapper {
   fromDataToIds(orderTemplateData: OrderTemplateData): OrderTemplate {
     if (orderTemplateData) {
       return {
-        id: OrderTemplateMapper.parseIDfromURI(orderTemplateData.uri),
+        id: OrderTemplateMapper.parseIdFromURI(orderTemplateData.uri),
         title: orderTemplateData.title,
       };
     }

src/app/extensions/order-templates/pages/account-order-template-detail/account-order-template-detail-line-item/account-order-template-detail-line-item.component.html

@@ -1,9 +1,8 @@
 <ng-container *ngIf="product$ | async as product">
   <div class="d-flex">
-    <div class="col-2 list-item d-none d-md-block">
+    <div class="col-1 col-md-2 list-item d-flex">
       <ish-checkbox [form]="selectItemForm" controlName="productCheckbox"> </ish-checkbox>
-
-      <a [routerLink]="product | ishProductRoute">
+      <a class="d-none d-md-inline" [routerLink]="product | ishProductRoute">
         <ish-product-image [product]="product" imageType="S" class="product-image"></ish-product-image>
       </a>
     </div>
@@ -53,7 +52,7 @@
     <div class="col-2 list-item d-none d-md-block text-right">
       {{ orderTemplateItemData?.creationDate | ishDate: 'shortDate' }}
     </div>
-    <div class="col-4 col-md-2 list-item text-right pr-0">
+    <div class="col-4 col-md-2 list-item column-price">
       <ish-product-price [product]="product"></ish-product-price>
     </div>
   </div>

src/app/extensions/order-templates/pages/account-order-template-detail/account-order-template-detail-line-item/account-order-template-detail-line-item.component.ts

@@ -45,7 +45,7 @@ export class AccountOrderTemplateDetailLineItemComponent implements OnChanges, O
 
   updateQuantities() {
     this.addToCartForm.valueChanges
-      .pipe(debounceTime(800), takeUntil(this.destroy$))
+      .pipe(debounceTime(500), takeUntil(this.destroy$))
       .subscribe(val => this.updateProductQuantity(this.orderTemplateItemData.sku, val.quantity));
   }
 

src/app/extensions/order-templates/pages/account-order-template-detail/account-order-template-detail-page.component.html

@@ -2,14 +2,16 @@
 <ish-error-message [error]="orderTemplateError$ | async"></ish-error-message>
 
 <ng-container *ngIf="orderTemplate$ | async as orderTemplate">
-  <a
-    (click)="editOrderTemplateDialog.show()"
-    class="btn btn-default btn-tool float-right"
-    [title]="'account.order_template.edit.heading' | translate"
-    data-testing-id="order-template-details-edit"
-    >{{ 'account.order_template.order_template.edit.rename' | translate }}</a
-  >
-  <h1>{{ orderTemplate?.title }}</h1>
+  <h1>
+    {{ orderTemplate?.title }}
+    <a
+      (click)="editOrderTemplateDialog.show()"
+      class="btn btn-default btn-tool float-right"
+      [title]="'account.order_template.edit.heading' | translate"
+      data-testing-id="order-template-details-edit"
+      >{{ 'account.order_template.order_template.edit.rename' | translate }}</a
+    >
+  </h1>
 
   <div class="section">
     <ng-container *ngIf="orderTemplate.itemsCount && orderTemplate.itemsCount > 0; else noItems" class="section">
@@ -40,7 +42,8 @@ <h1>{{ orderTemplate?.title }}</h1>
   </div>
   <ish-product-add-to-basket
     displayType="button"
-    [products]="orderTemplate.items"
+    [product]="dummyProduct"
+    [disabled]="!selectedItems?.length"
     [class]="'btn btn-primary float-right'"
     (productToBasket)="addSelectedItemsToCart(orderTemplate)"
   ></ish-product-add-to-basket>

src/app/extensions/order-templates/pages/account-order-template-detail/account-order-template-detail-page.component.ts

@@ -1,13 +1,13 @@
 import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
 import { FormArray } from '@angular/forms';
 import { Observable, Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { takeUntil, withLatestFrom } from 'rxjs/operators';
 
 import { ShoppingFacade } from 'ish-core/facades/shopping.facade';
 import { HttpError } from 'ish-core/models/http-error/http-error.model';
 
 import { OrderTemplatesFacade } from '../../facades/order-templates.facade';
-import { OrderTemplate } from '../../models/order-template/order-template.model';
+import { OrderTemplate, OrderTemplateItem } from '../../models/order-template/order-template.model';
 
 @Component({
   selector: 'ish-account-order-template-detail-page',
@@ -20,6 +20,8 @@ export class AccountOrderTemplateDetailPageComponent implements OnInit, OnDestro
   orderTemplateLoading$: Observable<boolean>;
 
   selectedItemsForm: FormArray;
+  selectedItems: OrderTemplateItem[];
+  dummyProduct = { sku: 'dummy', inStock: true, availability: true };
 
   private destroy$ = new Subject();
 
@@ -30,6 +32,12 @@ export class AccountOrderTemplateDetailPageComponent implements OnInit, OnDestro
     this.orderTemplateLoading$ = this.orderTemplatesFacade.orderTemplateLoading$;
     this.orderTemplateError$ = this.orderTemplatesFacade.orderTemplateError$;
     this.initForm();
+
+    this.selectedItemsForm.valueChanges
+      .pipe(withLatestFrom(this.orderTemplate$), takeUntil(this.destroy$))
+      .subscribe(([, orderTemplate]) => {
+        this.selectedItems = this.filterItems(orderTemplate);
+      });
   }
 
   private initForm() {
@@ -58,11 +66,15 @@ export class AccountOrderTemplateDetailPageComponent implements OnInit, OnDestro
     });
   }
 
+  filterItems(orderTemplate): OrderTemplateItem[] {
+    return orderTemplate.items.filter(item =>
+      this.selectedItemsForm.value.find(p => p.sku === item.sku && p.productCheckbox === true)
+    );
+  }
+
   addSelectedItemsToCart(orderTemplate: OrderTemplate) {
-    orderTemplate.items.forEach(item => {
-      if (this.selectedItemsForm.value.find(p => p.sku === item.sku && p.productCheckbox === true)) {
-        this.shoppingFacade.addProductToBasket(item.sku, item.desiredQuantity.value);
-      }
+    this.filterItems(orderTemplate).forEach(item => {
+      this.shoppingFacade.addProductToBasket(item.sku, item.desiredQuantity.value);
     });
   }
 }

src/app/extensions/order-templates/pages/account-order-template/account-order-template-list/account-order-template-list.component.html

@@ -29,7 +29,8 @@
       <a class="btn-tool d-inline-flex align-top">
         <ish-product-add-to-basket
           displayType="icon"
-          [products]="orderTemplate.items"
+          [product]="dummyProduct"
+          [disabled]="!orderTemplate.items?.length"
           class="text-primary p-0"
           (productToBasket)="addTemplateToCart(orderTemplate.id)"
         ></ish-product-add-to-basket>

src/app/extensions/order-templates/pages/account-order-template/account-order-template-list/account-order-template-list.component.ts

@@ -22,6 +22,8 @@ export class AccountOrderTemplateListComponent {
    */
   @Output() deleteOrderTemplate = new EventEmitter<string>();
 
+  dummyProduct = { sku: 'dummy', inStock: true, availability: true };
+
   constructor(private translate: TranslateService, private productFacade: ShoppingFacade) {}
 
   addTemplateToCart(orderTemplateId: string) {
@@ -44,7 +46,7 @@ export class AccountOrderTemplateListComponent {
   /** Determine the heading of the delete modal and opens the modal. */
   openDeleteConfirmationDialog(orderTemplate: OrderTemplate, modal: ModalDialogComponent) {
     this.translate
-      .get('modal.heading.remove.order.template', { 0: orderTemplate.title })
+      .get('account.order_templates.delete_dialog.header', { 0: orderTemplate.title })
       .pipe(take(1))
       .subscribe(res => (modal.options.titleText = res));
 

src/app/extensions/order-templates/services/order-template/order-template.service.spec.ts

@@ -49,12 +49,25 @@ describe('Order Template Service', () => {
     });
   });
 
+  it("should get an order template when 'getOrderTemplate' is called", done => {
+    when(apiServiceMock.get(`customers/-/users/-/wishlists/1234`)).thenReturn(of({ id: '1234' }));
+
+    orderTemplateService.getOrderTemplate('1234').subscribe(() => {
+      verify(apiServiceMock.get(`customers/-/users/-/wishlists/1234`)).once();
+      done();
+    });
+  });
+
   it("should create an order template when 'createOrderTemplate' is called", done => {
     const orderTemplateId = '1234';
     const orderTemplateHeader: OrderTemplateHeader = { title: 'order template title' };
     when(apiServiceMock.post(`customers/-/users/-/wishlists`, anything())).thenReturn(
       of({ title: orderTemplateId } as OrderTemplateData)
     );
+    when(apiServiceMock.post(`customers/-/users/-/wishlists`, anything())).thenReturn(
+      of({ title: orderTemplateId } as OrderTemplateData)
+    );
+    when(apiServiceMock.get(`customers/-/users/-/wishlists/1234`)).thenReturn(of({ id: '1234' }));
 
     orderTemplateService.createOrderTemplate(orderTemplateHeader).subscribe(data => {
       expect(orderTemplateId).toEqual(data.id);

src/app/extensions/order-templates/services/order-template/order-template.service.ts

@@ -32,7 +32,7 @@ export class OrderTemplateService {
    * @param orderTemplateId  The order template id.
    * @returns           The order template.
    */
-  private getOrderTemplate(orderTemplateId): Observable<OrderTemplate> {
+  getOrderTemplate(orderTemplateId: string): Observable<OrderTemplate> {
     if (!orderTemplateId) {
       return throwError('getOrderTemplate() called without orderTemplateId');
     }
@@ -46,12 +46,10 @@ export class OrderTemplateService {
    * @param OrderTemplateDetails   The order template data.
    * @returns                 The created order template.
    */
-  createOrderTemplate(orderTemplatetData: OrderTemplateHeader): Observable<OrderTemplate> {
+  createOrderTemplate(orderTemplateData: OrderTemplateHeader): Observable<OrderTemplate> {
     return this.apiService
-      .post('customers/-/users/-/wishlists', orderTemplatetData)
-      .pipe(
-        map((response: OrderTemplateData) => this.orderTemplateMapper.fromData(orderTemplatetData, response.title))
-      );
+      .post('customers/-/users/-/wishlists', orderTemplateData)
+      .pipe(concatMap((response: OrderTemplateData) => this.getOrderTemplate(response.title)));
   }
 
   /**

src/app/extensions/order-templates/shared/order-templates/select-order-template-modal/select-order-template-modal.component.html

@@ -51,6 +51,7 @@ <h2 class="modal-title">{{ headerTranslationKey | translate }}</h2>
                     id="orderTemplate"
                   />
                   <ish-input
+                    class="w-75"
                     controlName="newOrderTemplate"
                     [disabled]="newOrderTemplateDisabled ? 'true' : null"
                     [errorMessages]="{ required: 'account.order_template.name.error.required' }"

src/app/extensions/order-templates/shared/order-templates/select-order-template-modal/select-order-template-modal.component.ts

@@ -39,7 +39,7 @@ export class SelectOrderTemplateModalComponent implements OnInit, OnDestroy {
   @Input() addMoveProduct: 'add' | 'move' = 'add';
 
   /**
-   * submit successfull event
+   * submit success event
    */
   @Output() submitEmitter = new EventEmitter<{ id: string; title: string }>();
 

src/app/shared/components/basket/line-item-list/line-item-list.component.html

@@ -49,8 +49,7 @@
             <div class="d-flex align-items-center">
               <ish-lazy-product-add-to-order-template
                 *ngIf="editable"
-                class="btn-tool"
-                [class]="'btn btn-link add-to-order-template mt-0 mr-0'"
+                [class]="'btn btn-link btn-tool add-to-order-template'"
                 [product]="pli.product"
                 displayType="icon"
                 [quantity]="form.get(['items', i]).value.quantity"

src/app/shared/components/product/product-add-to-basket/product-add-to-basket.component.html

@@ -1,7 +1,4 @@
-<div
-  *ngIf="(product && product.inStock && product.availability) || (products && products.length > 0)"
-  class="add-to-cart"
->
+<div *ngIf="product?.inStock && product?.availability" class="add-to-cart">
   <button
     type="submit"
     name="addProduct"

src/app/shared/components/product/product-add-to-basket/product-add-to-basket.component.spec.ts

@@ -17,7 +17,6 @@ describe('Product Add To Basket Component', () => {
   let product: Product;
   let translate: TranslateService;
   let element: HTMLElement;
-  let products: Product[];
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -44,11 +43,8 @@ describe('Product Add To Basket Component', () => {
     product.inStock = true;
     product.minOrderQuantity = 1;
     product.availability = true;
-    products = [];
-    products.push(product);
     element = fixture.nativeElement;
     component.product = product;
-    component.products = products;
   });
 
   it('should be created', () => {
@@ -57,9 +53,15 @@ describe('Product Add To Basket Component', () => {
     expect(() => fixture.detectChanges()).not.toThrow();
   });
 
-  it('should not render when product and products are undefined', () => {
+  it('should throw an error if input parameter product is not set', () => {
     component.product = undefined;
-    component.products = undefined;
+    fixture.detectChanges();
+    expect(element.querySelector('button')).toBeFalsy();
+  });
+
+  it('should not render when inStock = false', () => {
+    product.inStock = false;
+
     fixture.detectChanges();
     expect(element.querySelector('button')).toBeFalsy();
   });

src/app/shared/components/product/product-add-to-basket/product-add-to-basket.component.ts

@@ -30,11 +30,7 @@ export class ProductAddToBasketComponent implements OnInit, OnDestroy {
   /**
    * The product that can be added to basket
    */
-  @Input() product?: Product;
-  /**
-   * The products that can be added to basket
-   */
-  @Input() products?: Product[];
+  @Input() product: Product;
   /**
    * When true, it specifies that the button should be disabled
    */