fix: display variations when there are no variation attributes at the…

… master product (#1599)

src/app/core/models/product-variation/product-variation.helper.ts

@@ -18,7 +18,7 @@ export class ProductVariationHelper {
     }
 
     // transform currently selected variation attribute list to object with the attributeId as key
-    const currentSettings = (product.variableVariationAttributes || []).reduce<{ [id: string]: VariationAttribute }>(
+    const currentSettings = product.variableVariationAttributes.reduce<{ [id: string]: VariationAttribute }>(
       (acc, attr) => ({
         ...acc,
         [attr.variationAttributeId]: attr,
@@ -101,6 +101,10 @@ export class ProductVariationHelper {
       filters.filter.map(filter => filter.facets.filter(facet => facet.selected).map(facet => facet.name))
     ).map(selected => selected.split('='));
 
+    if (!selectedFacets.length) {
+      return product.variations?.length;
+    }
+
     return product.variations
       .map(p => p.variableVariationAttributes)
       .filter(attrs =>
@@ -136,7 +140,7 @@ export class ProductVariationHelper {
         quality = 0;
 
         // loop attributes of possible variation.
-        for (const attribute of variation.variableVariationAttributes || []) {
+        for (const attribute of variation.variableVariationAttributes) {
           // increment quality if variation attribute matches selected product attribute.
           if (
             attribute.variationAttributeId === selectedAttribute.variationAttributeId &&

src/app/core/models/product-variation/variation-attribute.mapper.ts

@@ -14,13 +14,15 @@ export class VariationAttributeMapper {
   constructor(private imageMapper: ImageMapper) {}
 
   fromData(data: VariationAttributeData[]): VariationAttribute[] {
-    return data?.map(varAttr => ({
-      variationAttributeId: varAttr.variationAttributeId,
-      name: varAttr.name,
-      value: varAttr.value.value,
-      attributeType: varAttr.attributeType,
-      metaData: this.mapMetaData(varAttr.attributeType, varAttr.metadata),
-    }));
+    return (
+      data?.map(varAttr => ({
+        variationAttributeId: varAttr.variationAttributeId,
+        name: varAttr.name,
+        value: varAttr.value.value,
+        attributeType: varAttr.attributeType,
+        metaData: this.mapMetaData(varAttr.attributeType, varAttr.metadata),
+      })) ?? []
+    );
   }
 
   fromMasterData(variationAttributes: VariationAttributeData[]): VariationAttribute[] {

src/app/core/routing/product/product.route.ts

@@ -23,7 +23,7 @@ function generateLocalizedProductSlug(product: ProductView) {
 
   let slug = product.name || '';
 
-  if (ProductHelper.isVariationProduct(product) && product.variableVariationAttributes) {
+  if (ProductHelper.isVariationProduct(product) && product.variableVariationAttributes?.length > 0) {
     slug += '-';
     slug += product.variableVariationAttributes
       .map(att => att.value)

src/app/pages/product/product-master-variations/product-master-variations.component.html

@@ -1,4 +1,4 @@
-<ng-container *ngIf="variationCount$ | async">
+<ng-container *ngIf="hasVariations$ | async">
   <a id="variation-list-top" title="top"></a>
   <ish-filter-navigation orientation="horizontal" fragmentOnRouting="variation-list-top" />
   <ish-product-listing

src/app/pages/product/product-master-variations/product-master-variations.component.spec.ts

@@ -5,6 +5,7 @@ import { of } from 'rxjs';
 import { instance, mock, when } from 'ts-mockito';
 
 import { ProductContextFacade } from 'ish-core/facades/product-context.facade';
+import { ProductView } from 'ish-core/models/product-view/product-view.model';
 import { FilterNavigationComponent } from 'ish-shared/components/filter/filter-navigation/filter-navigation.component';
 import { ProductListingComponent } from 'ish-shared/components/product/product-listing/product-listing.component';
 
@@ -17,8 +18,10 @@ describe('Product Master Variations Component', () => {
 
   beforeEach(async () => {
     const context = mock(ProductContextFacade);
-    when(context.select('variationCount')).thenReturn(of(3));
     when(context.select('product', 'sku')).thenReturn(of('123456789'));
+    when(context.select('product')).thenReturn(
+      of({ type: 'VariationProductMaster', variations: [{ sku: '123456789-01' }] } as ProductView)
+    );
 
     await TestBed.configureTestingModule({
       declarations: [

src/app/pages/product/product-master-variations/product-master-variations.component.ts

@@ -5,6 +5,7 @@ import { Observable } from 'rxjs';
 import { debounce, filter, map, takeUntil } from 'rxjs/operators';
 
 import { ProductContextFacade } from 'ish-core/facades/product-context.facade';
+import { ProductHelper } from 'ish-core/models/product/product.model';
 
 @Component({
   selector: 'ish-product-master-variations',
@@ -15,14 +16,16 @@ import { ProductContextFacade } from 'ish-core/facades/product-context.facade';
 export class ProductMasterVariationsComponent implements OnInit {
   sku$: Observable<string>;
   categoryId$: Observable<string>;
-  variationCount$: Observable<number>;
+  hasVariations$: Observable<boolean>;
 
   constructor(private router: Router, private scroller: ViewportScroller, private context: ProductContextFacade) {}
 
   ngOnInit() {
     this.sku$ = this.context.select('product', 'sku');
     this.categoryId$ = this.context.select('categoryId');
-    this.variationCount$ = this.context.select('variationCount');
+    this.hasVariations$ = this.context
+      .select('product')
+      .pipe(map(product => ProductHelper.isMasterProduct(product) && product.variations?.length > 0));
 
     this.router.events
       .pipe(