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/exports/.gitignore

@@ -0,0 +1 @@
+*/**/*.*

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/order-templates.module.ts

@@ -16,6 +16,5 @@ import { ProductAddToOrderTemplateComponent } from './shared/product/product-add
     SelectOrderTemplateModalComponent,
   ],
   exports: [OrderTemplatePreferencesDialogComponent, SelectOrderTemplateModalComponent],
-  entryComponents: [BasketCreateOrderTemplateComponent, ProductAddToOrderTemplateComponent],
 })
 export class OrderTemplatesModule {}

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));