From 45cd12038d4cd72b258dbce0ee361f8fdaf33108 Mon Sep 17 00:00:00 2001
From: Maciej Kucmus <mkucmus@divante.pl>
Date: Fri, 13 Dec 2019 08:04:46 +0100
Subject: [PATCH 1/6] feat(product): handle variants change.

---
 .../composables/__tests__/useProduct.spec.ts  | 11 +--
 .../composables/src/hooks/useCms/index.ts     | 15 +++-
 .../composables/src/hooks/useProduct/index.ts | 29 ++++++-
 .../components/SwProductCard.vue              |  4 +-
 .../components/views/ProductView.vue          | 78 +++++++++++++++----
 .../src/product/getProductMediaGallery.ts     |  4 +-
 .../helpers/src/product/getProductOption.ts   |  1 +
 .../src/product/getProductOptionUrl.ts        | 53 +++++++++++++
 .../helpers/src/product/getProductOptions.ts  | 51 ++++++++++--
 packages/helpers/src/product/index.ts         |  1 +
 .../helpers/src/product/isProductSimple.ts    |  5 ++
 packages/helpers/src/ui-interfaces.ts         |  2 +
 .../models/content/product/Product.ts         | 23 ++++++
 .../src/services/pageService.ts               |  4 +-
 14 files changed, 243 insertions(+), 38 deletions(-)
 create mode 100644 packages/helpers/src/product/getProductOptionUrl.ts

diff --git a/packages/composables/__tests__/useProduct.spec.ts b/packages/composables/__tests__/useProduct.spec.ts
index 9c4c76b9c..4796cfccb 100644
--- a/packages/composables/__tests__/useProduct.spec.ts
+++ b/packages/composables/__tests__/useProduct.spec.ts
@@ -58,12 +58,13 @@ describe("Composables - useProduct", () => {
         id: "3f637f17cd9f4891a2d7625d19fb37c9",
         parentId: "1c3e927309014a67a07f3bb574f9e804"
       };
-      mockedGetProduct.getProduct.mockResolvedValueOnce(
-        { } as any
-      );
+      mockedGetProduct.getProduct.mockResolvedValueOnce({} as any);
       const { loadAssociations } = useProduct(loadedProduct);
-      loadAssociations({} as any)
-      expect(mockedGetProduct.getProduct).toBeCalledWith("1c3e927309014a67a07f3bb574f9e804", {})
+      loadAssociations({} as any);
+      expect(mockedGetProduct.getProduct).toBeCalledWith(
+        "1c3e927309014a67a07f3bb574f9e804",
+        {}
+      );
     });
 
     it("should have associations if loadAssociations was triggered", async () => {
diff --git a/packages/composables/src/hooks/useCms/index.ts b/packages/composables/src/hooks/useCms/index.ts
index a540e41f0..e81b36ca1 100644
--- a/packages/composables/src/hooks/useCms/index.ts
+++ b/packages/composables/src/hooks/useCms/index.ts
@@ -9,7 +9,20 @@ export const useCms = (): any => {
   const search = async (path: string) => {
     loading.value = true;
     try {
-      const result = await getPage(path);
+      const result = await getPage(path, {
+        configuration: {
+          associations: [
+            {
+              name: "options",
+              associations: [
+                {
+                  name: "group"
+                }
+              ]
+            }
+          ]
+        }
+      });
       page.value = result;
       return result;
     } catch (e) {
diff --git a/packages/composables/src/hooks/useProduct/index.ts b/packages/composables/src/hooks/useProduct/index.ts
index f806d30c2..eed812599 100644
--- a/packages/composables/src/hooks/useProduct/index.ts
+++ b/packages/composables/src/hooks/useProduct/index.ts
@@ -1,4 +1,4 @@
-import { ref, Ref } from "@vue/composition-api";
+import { ref, Ref, watch } from "@vue/composition-api";
 import { getProduct, Product } from "@shopware-pwa/shopware-6-client";
 
 const NO_PRODUCT_REFERENCE_ERROR =
@@ -25,9 +25,30 @@ export const useProduct = (
     if (!product || !product.value || !product.value.id) {
       throw NO_PRODUCT_REFERENCE_ERROR;
     }
-
-    const result = await getProduct(product.value.parentId || product.value.id, associations);
-    product.value = result;
+    //const productData = await getProduct(product.value.parentId || product.value.id, associations);
+    const {
+      id,
+      name,
+      description,
+      media,
+      cover,
+      properties,
+      productReviews,
+      children
+    } = await getProduct(
+      product.value.parentId || product.value.id,
+      associations
+    );
+    console.warn("ID ", id);
+    product.value = Object.assign({}, product.value, {
+      name,
+      description,
+      media,
+      cover,
+      properties,
+      productReviews,
+      children
+    });
   };
 
   const search = async (path: string) => {
diff --git a/packages/default-theme/components/SwProductCard.vue b/packages/default-theme/components/SwProductCard.vue
index df983b4ba..8271ead30 100644
--- a/packages/default-theme/components/SwProductCard.vue
+++ b/packages/default-theme/components/SwProductCard.vue
@@ -30,7 +30,7 @@
 <script>
 import { SfProductCard, SfAddToCart } from "@storefront-ui/vue";
 import { useAddToCart } from "@shopware-pwa/composables"
-
+import { getPrettyUrl } from "@shopware-pwa/helpers";
 export default {
   components: {
     SfProductCard,
@@ -57,7 +57,7 @@ export default {
   computed: {
     // should be replaced with prettyUrl attribute when pretty urls are included in product entity
     getRouterLink() {
-      return `/detail/${this.product.id}`
+      return getPrettyUrl(this.product)
     },
     getUnitPrice() {
       return (
diff --git a/packages/default-theme/components/views/ProductView.vue b/packages/default-theme/components/views/ProductView.vue
index c498b63a5..d7ef80d55 100644
--- a/packages/default-theme/components/views/ProductView.vue
+++ b/packages/default-theme/components/views/ProductView.vue
@@ -45,7 +45,7 @@
           <div class="product-details__action">
             <button class="sf-action" v-if="sizes.length > 0">Size guide</button>
           </div>
-          <div class="product-details__section" v-if="isSimple">
+          <div class="product-details__section">
             <SfProperty v-if="color"
             name="Color"
             :value="color.name"/>
@@ -61,11 +61,12 @@
               class="sf-select--bordered product-details__attribute"
             >
               <SfSelectOption
+                id="size_option"
                 v-for="size in sizes"
-                :key="size.value"
-                :value="size.value"
+                :key="size.id"
+                :value="size.id"
               >
-                <SfProductOption :label="size.label" />
+                <SfProductOption :label="size.active ? size.label : `${size.label} (unavailable)`" />
               </SfSelectOption>
             </SfSelect>
             <SfSelect
@@ -75,11 +76,12 @@
               class="sf-select--bordered product-details__attribute"
             >
               <SfSelectOption
+                id="color_option"
                 v-for="color in colors"
-                :key="color.value"
-                :value="color.value"
+                :key="color.id"
+                :value="color.id"
               >
-                <SfProductOption :label="color.label" :color="color.color" />
+                <SfProductOption :label="color.active ? color.label : `${color.label} (unavailable)`" :color="color.color" />
               </SfSelectOption>
             </SfSelect>
           </div>
@@ -183,7 +185,7 @@ import {
   getProductOption,
   getProductReviews,
   getProductRegularPrice,
-  isProductSimple } from "@shopware-pwa/helpers";
+  isProductSimple, getProductOptionUrl } from "@shopware-pwa/helpers";
 
 export default {
   name: "Product",
@@ -219,12 +221,12 @@ export default {
     return {
       productWithAssociations: null,
       relatedProducts: [],
-      selectedSize: null,
-      selectedColor: null
+      selectedColor: null,
+      selectedSize: null
     };
   },
-  setup ({page}) {
-    const {addToCart, quantity, getStock} = useAddToCart(page && page.product)
+  setup ({ page }) {
+    const { addToCart, quantity, getStock } = useAddToCart(page && page.product)
 
     return {
       quantity,
@@ -236,11 +238,12 @@ export default {
     // TODO remove when page resolver is fully done
     const associations = {
       "associations[media][]": true,
-      "associations[options][associations][group][]": true,
+      //"associations[options][associations][group][]": true,
       "associations[properties][associations][group][]": true,
       "associations[productReviews][]": true, // can be fetched asynchronously
       "associations[manufacturer][]": true,
       "associations[children][associations][options][associations][group][]": true,
+      "associations[children][associations][seoUrls][]": true,
     }
 
     const { loadAssociations, product } = useProduct(this.page.product);
@@ -278,6 +281,12 @@ export default {
     properties() {
       return getProductProperties({product: this.product})
     },
+    selectedOptions() {
+      return {
+        color: this.selectedColor,
+        size: this.selectedSize
+      }
+    },
     color() {
       if (!this.isSimple) {
         return ""
@@ -299,16 +308,20 @@ export default {
       })
     },
     colors() {
-      return getProductOptions({
+      const colorOptions = getProductOptions({
         product: this.product,
-        attribute: "color"
+        attribute: "color",
+        selected: this.selectedOptions
       })
+      return colorOptions
     },
     sizes() {
-      return getProductOptions({
+      const sizeOptions = getProductOptions({
         product: this.product,
-        attribute: "size"
+        attribute: "size",
+        selected: this.selectedOptions
       })
+      return sizeOptions
     },
     reviews() {
       return getProductReviews({product: this.product})
@@ -322,7 +335,38 @@ export default {
     toggleWishlist(index) {
       this.products[index].isOnWishlist = !this.products[index].isOnWishlist;
     }
+  },
+  watch: {
+    selectedOptions(selected) {
+        const distinctOptions = []
+
+        for (const attributeKey in selected) {
+          if (!selected.hasOwnProperty(attributeKey)) {
+            continue;
+          }
+
+          distinctOptions.push(selected[attributeKey])
+        }
+
+        console.warn('SELECTED OPTIONS SET: ',
+          [...new Set(distinctOptions)]
+        )
+
+      if ([...new Set(distinctOptions)].length === 1) {
+        console.warn('push: ', {
+            selectedOptionId: distinctOptions.shift(),
+            variants: this.product.children
+          })
+        this.$router.push(getProductOptionUrl({
+            selectedOptionId: distinctOptions.shift(),
+            variants: this.product.children
+          }
+          ))
+      }
+
+    }
   }
+
 }
 </script>
 <style lang="scss" scoped>
diff --git a/packages/helpers/src/product/getProductMediaGallery.ts b/packages/helpers/src/product/getProductMediaGallery.ts
index 5e3ed6186..62570230a 100644
--- a/packages/helpers/src/product/getProductMediaGallery.ts
+++ b/packages/helpers/src/product/getProductMediaGallery.ts
@@ -20,8 +20,8 @@ export function getProductMediaGallery({
           media.media.thumbnails.find(thumb => thumb.width == "1920");
         return {
           small: { url: smallThumb ? smallThumb.url : media.media.url },
-          normal: { url: normalThumb ? normalThumb.url :  media.media.url },
-          big: { url: bigThumb ? bigThumb.url :  media.media.url }
+          normal: { url: normalThumb ? normalThumb.url : media.media.url },
+          big: { url: bigThumb ? bigThumb.url : media.media.url }
         };
       })
     : [];
diff --git a/packages/helpers/src/product/getProductOption.ts b/packages/helpers/src/product/getProductOption.ts
index b084c41aa..1c38e3fdb 100644
--- a/packages/helpers/src/product/getProductOption.ts
+++ b/packages/helpers/src/product/getProductOption.ts
@@ -8,6 +8,7 @@ export function getProductOption({
   | PropertyGroupOption
   | null
   | undefined {
+  console.warn("getProductOption", product && product.options);
   return (
     product &&
     product.options &&
diff --git a/packages/helpers/src/product/getProductOptionUrl.ts b/packages/helpers/src/product/getProductOptionUrl.ts
new file mode 100644
index 000000000..a05246ae1
--- /dev/null
+++ b/packages/helpers/src/product/getProductOptionUrl.ts
@@ -0,0 +1,53 @@
+import { Product } from "@shopware-pwa/shopware-6-client";
+
+export function getPrettyUrl(
+  product?: Product | null
+): string | false | null | undefined {
+  return (
+    product &&
+    product.seoUrls &&
+    product.seoUrls.length > 0 &&
+    product.seoUrls[0].seoPathInfo
+  );
+}
+
+export function getProductOptionVariant({
+  selectedOptionId,
+  variants
+}: {
+  variants?: Product[];
+  selectedOptionId?: string;
+} = {}): Product | null {
+  if (!variants) {
+    return null;
+  }
+
+  for (const variant of variants) {
+    if (!variant.options) {
+      continue;
+    }
+    if (variant.id == selectedOptionId) {
+      console.warn("LINK: ", getPrettyUrl(variant));
+      return variant;
+    }
+  }
+
+  return null;
+}
+
+export function getProductOptionUrl({
+  selectedOptionId,
+  variants
+}: {
+  variants?: Product[];
+  selectedOptionId?: string;
+} = {}): string | false | null | undefined {
+  const foundVariant = getProductOptionVariant({
+    selectedOptionId,
+    variants
+  });
+
+  console.warn("found variant:", foundVariant);
+
+  return getPrettyUrl(foundVariant);
+}
diff --git a/packages/helpers/src/product/getProductOptions.ts b/packages/helpers/src/product/getProductOptions.ts
index d494b13d3..6b9034f95 100644
--- a/packages/helpers/src/product/getProductOptions.ts
+++ b/packages/helpers/src/product/getProductOptions.ts
@@ -1,11 +1,48 @@
 import { Product } from "@shopware-pwa/shopware-6-client";
 import { UiProductOption } from "@shopware-pwa/helpers";
 
+const findOptionForOtherAttributes = (
+  selected: any,
+  variant: any,
+  attribute?: string
+): boolean => {
+  if (!attribute) {
+    return true;
+  }
+
+  const selectedAttributesCount = Object.keys(selected).length;
+  let nullableAttributesCount = 0;
+
+  for (const attributeKey in selected) {
+    if (!selected.hasOwnProperty(attributeKey)) {
+      continue;
+    }
+
+    if (selected[attributeKey] === null) {
+      nullableAttributesCount++;
+    }
+
+    if (attributeKey == attribute) {
+      continue;
+    }
+
+    if (variant.id === selected[attributeKey]) {
+      return true;
+    }
+  }
+
+  return selectedAttributesCount == nullableAttributesCount || false;
+};
 export function getProductOptions({
   product,
-  attribute
-}: { product?: Product; attribute?: string } = {}): UiProductOption[] {
-  if (!product || !product.children || !attribute) {
+  attribute,
+  selected
+}: {
+  product?: Product;
+  attribute?: string;
+  selected?: any;
+} = {}): UiProductOption[] {
+  if (!product || !product.children) {
     return [];
   }
 
@@ -14,13 +51,15 @@ export function getProductOptions({
     if (!variant || !variant.options || !variant.options.length) {
       return;
     }
+
     for (let option of variant.options) {
-      if (option.group && option.group.name === attribute) {
+      if ((option.group && option.group.name === attribute) || !attribute) {
         if (!typeOptions.has(option.id)) {
           typeOptions.set(option.id, {
             label: option.name,
-            value: variant.id,
-            [attribute]: option.name
+            id: variant.id,
+            code: option.group && option.group.name,
+            active: findOptionForOtherAttributes(selected, variant, attribute)
           });
         }
       }
diff --git a/packages/helpers/src/product/index.ts b/packages/helpers/src/product/index.ts
index 59cbde5db..d41a715bb 100644
--- a/packages/helpers/src/product/index.ts
+++ b/packages/helpers/src/product/index.ts
@@ -6,3 +6,4 @@ export * from "./getProductReviews";
 export * from "./getProductOption";
 export * from "./getProductRegularPrice";
 export * from "./isProductSimple";
+export * from "./getProductOptionUrl";
diff --git a/packages/helpers/src/product/isProductSimple.ts b/packages/helpers/src/product/isProductSimple.ts
index 38260bf23..92a28a954 100644
--- a/packages/helpers/src/product/isProductSimple.ts
+++ b/packages/helpers/src/product/isProductSimple.ts
@@ -3,5 +3,10 @@ import { Product } from "@shopware-pwa/shopware-6-client";
 export function isProductSimple({
   product
 }: { product?: Product } = {}): boolean {
+  console.warn(
+    "isProductsimple",
+    product && product.parentId,
+    product && product.id
+  );
   return !!product && !!product.parentId && product.id !== product.parentId;
 }
diff --git a/packages/helpers/src/ui-interfaces.ts b/packages/helpers/src/ui-interfaces.ts
index 0f11deec1..87ed55140 100644
--- a/packages/helpers/src/ui-interfaces.ts
+++ b/packages/helpers/src/ui-interfaces.ts
@@ -10,7 +10,9 @@ export interface UiMediaGalleryItem {
 export interface UiProductOption {
   label: string;
   value: string;
+  code: string;
   [attribute: string]: string;
+  active?: boolean;
 }
 
 export interface UiProductProperty {
diff --git a/packages/shopware-6-client/src/interfaces/models/content/product/Product.ts b/packages/shopware-6-client/src/interfaces/models/content/product/Product.ts
index e036351e6..41fe51120 100644
--- a/packages/shopware-6-client/src/interfaces/models/content/product/Product.ts
+++ b/packages/shopware-6-client/src/interfaces/models/content/product/Product.ts
@@ -15,6 +15,28 @@ import { Category } from "../category/Category";
 import { Tag } from "../../system/tag/Tag";
 import { CustomField } from "../../common/CustomField";
 
+export interface SeoUrl {
+  reatedAt: Date;
+  customFields: null | any;
+  extensions: any[];
+  foreignKey: string;
+  id: string;
+  isCanonical: boolean;
+  isDeleted: boolean;
+  isModified: boolean;
+  isValid: boolean | null;
+  language: string | null;
+  languageId: string;
+  pathInfo: string;
+  routeName: string;
+  salesChannelId: string | null;
+  seoPathInfo: string;
+  translated: [];
+  updatedAt: Date | null;
+  url: string | null;
+  versionId: string | null;
+}
+
 export interface Product {
   calculatedListingPrice: ListingPrice;
   calculatedPrices: Price[];
@@ -86,5 +108,6 @@ export interface Product {
   id: string;
   parentVersionId: string;
   productManufacturerVersionId: string;
+  seoUrls: SeoUrl[] | null;
   productMediaVersiond?: null;
 }
diff --git a/packages/shopware-6-client/src/services/pageService.ts b/packages/shopware-6-client/src/services/pageService.ts
index bc662db66..963300103 100644
--- a/packages/shopware-6-client/src/services/pageService.ts
+++ b/packages/shopware-6-client/src/services/pageService.ts
@@ -3,13 +3,15 @@ import { apiService } from "../apiService";
 import { SearchCriteria } from "../interfaces/search/SearchCriteria";
 import { CmsPage } from "../interfaces/models/content/cms/CmsPage";
 import { PageResolverResult } from "../interfaces/response/PageResolverResult";
+import { convertSearchCriteria } from "../helpers/searchConverter";
 
 export async function getPage(
   path: string,
   searchCriteria?: SearchCriteria
 ): Promise<PageResolverResult<CmsPage>> {
   const resp = await apiService.post(getPageResolverEndpoint(), {
-    path: path
+    path: path,
+    ...convertSearchCriteria(searchCriteria)
   });
 
   return resp.data;

From 3cf32555e6dba2f12404c8bb645ec068c7e50212 Mon Sep 17 00:00:00 2001
From: patzick <tomczyk.patryk@gmail.com>
Date: Fri, 13 Dec 2019 13:09:50 +0100
Subject: [PATCH 2/6] wip: product variants

---
 .../composables/src/hooks/useProduct/index.ts |  2 +-
 .../components/views/ProductView.vue          | 66 ++++++++++---------
 .../src/product/getProductOptionUrl.ts        | 44 +++++++++----
 .../helpers/src/product/getProductOptions.ts  |  6 +-
 packages/helpers/src/product/getProductUrl.ts |  9 ++-
 .../models/content/product/Product.ts         |  2 +-
 6 files changed, 77 insertions(+), 52 deletions(-)

diff --git a/packages/composables/src/hooks/useProduct/index.ts b/packages/composables/src/hooks/useProduct/index.ts
index ac86024dc..af71af411 100644
--- a/packages/composables/src/hooks/useProduct/index.ts
+++ b/packages/composables/src/hooks/useProduct/index.ts
@@ -1,4 +1,4 @@
-import { ref, Ref, watch } from "@vue/composition-api";
+import { ref, Ref } from "@vue/composition-api";
 import { getProduct, Product } from "@shopware-pwa/shopware-6-client";
 
 const NO_PRODUCT_REFERENCE_ERROR =
diff --git a/packages/default-theme/components/views/ProductView.vue b/packages/default-theme/components/views/ProductView.vue
index f28f98329..0db0270f6 100644
--- a/packages/default-theme/components/views/ProductView.vue
+++ b/packages/default-theme/components/views/ProductView.vue
@@ -56,7 +56,7 @@
                 :key="size.id"
                 :value="size.id"
               >
-                <SfProductOption :label="size.active ? size.label : `${size.label} (unavailable)`" />
+                <SfProductOption :label="size.label" />
               </SfSelectOption>
             </SfSelect>
             <SfSelect
@@ -71,7 +71,7 @@
                 :key="color.id"
                 :value="color.id"
               >
-                <SfProductOption :label="color.active ? color.label : `${color.label} (unavailable)`" :color="color.color" />
+                <SfProductOption :label="color.label" :color="color.label" />
               </SfSelectOption>
             </SfSelect>
           </div>
@@ -175,7 +175,8 @@ import {
   getProductRegularPrice,
   isProductSimple, 
   getProductSpecialPrice,
-  getProductOptionUrl
+  getProductOptionUrl,
+  getProductOptionsUrl
   } from "@shopware-pwa/helpers";
 import SwProductGallery from '../cms/elements/SwProductGallery'
 
@@ -227,6 +228,7 @@ export default {
     }
   },
   async mounted() {
+    console.error('MOUNTED PRODUCT!!!!')
     // TODO remove when page resolver is fully done
     const associations = {
       "associations[media][]": true,
@@ -272,10 +274,7 @@ export default {
       return getProductProperties({product: this.product})
     },
     selectedOptions() {
-      return {
-        color: this.selectedColor,
-        size: this.selectedSize
-      }
+      return [this.selectedColor, this.selectedSize]
     },
     color() {
       if (!this.isSimple) {
@@ -300,16 +299,14 @@ export default {
     colors() {
       const colorOptions = getProductOptions({
         product: this.product,
-        attribute: "color",
-        selected: this.selectedOptions
+        attribute: "color"
       })
       return colorOptions
     },
     sizes() {
       const sizeOptions = getProductOptions({
         product: this.product,
-        attribute: "size",
-        selected: this.selectedOptions
+        attribute: "size"
       })
       return sizeOptions
     },
@@ -328,31 +325,36 @@ export default {
   },
   watch: {
     selectedOptions(selected) {
-        const distinctOptions = []
+        // const distinctOptions = []
 
-        for (const attributeKey in selected) {
-          if (!selected.hasOwnProperty(attributeKey)) {
-            continue;
-          }
+        // for (const attributeKey in selected) {
+        //   if (!selected.hasOwnProperty(attributeKey)) {
+        //     continue;
+        //   }
 
-          distinctOptions.push(selected[attributeKey])
-        }
+        //   distinctOptions.push(selected[attributeKey])
+        // }
 
-        console.warn('SELECTED OPTIONS SET: ',
-          [...new Set(distinctOptions)]
-        )
+        console.error('SELECTED CHANGED', selected)
+        const utl = getProductOptionsUrl({product: this.product, options: selected})
+        console.error("URL ---------> " + utl)
+        this.$router.push(utl);
 
-      if ([...new Set(distinctOptions)].length === 1) {
-        console.warn('push: ', {
-            selectedOptionId: distinctOptions.shift(),
-            variants: this.product.children
-          })
-        this.$router.push(getProductOptionUrl({
-            selectedOptionId: distinctOptions.shift(),
-            variants: this.product.children
-          }
-          ))
-      }
+        // console.warn('SELECTED OPTIONS SET: ',
+        //   [...new Set(distinctOptions)]
+        // )
+
+      // if ([...new Set(distinctOptions)].length === 1) {
+      //   console.warn('push: ', {
+      //       selectedOptionId: distinctOptions.shift(),
+      //       variants: this.product.children
+      //     })
+      //   this.$router.push(getProductOptionUrl({
+      //       selectedOptionId: distinctOptions.shift(),
+      //       variants: this.product.children
+      //     }
+      //     ))
+      // }
 
     }
   }
diff --git a/packages/helpers/src/product/getProductOptionUrl.ts b/packages/helpers/src/product/getProductOptionUrl.ts
index a05246ae1..eec8df008 100644
--- a/packages/helpers/src/product/getProductOptionUrl.ts
+++ b/packages/helpers/src/product/getProductOptionUrl.ts
@@ -1,15 +1,5 @@
 import { Product } from "@shopware-pwa/shopware-6-client";
-
-export function getPrettyUrl(
-  product?: Product | null
-): string | false | null | undefined {
-  return (
-    product &&
-    product.seoUrls &&
-    product.seoUrls.length > 0 &&
-    product.seoUrls[0].seoPathInfo
-  );
-}
+import { getProductUrl } from "./getProductUrl";
 
 export function getProductOptionVariant({
   selectedOptionId,
@@ -27,13 +17,41 @@ export function getProductOptionVariant({
       continue;
     }
     if (variant.id == selectedOptionId) {
-      console.warn("LINK: ", getPrettyUrl(variant));
+      console.warn("LINK: ", getProductUrl(variant));
       return variant;
     }
   }
 
   return null;
 }
+export function getProductOptionsUrl({
+  options,
+  product
+}: {
+  options?: string[];
+  product?: Product;
+} = {}): string {
+  if (!product) return "";
+  const variant =
+    options &&
+    product.children
+      .filter(
+        variant =>
+          variant.optionIds &&
+          variant.optionIds.every(optionId => options.includes(optionId))
+      )
+      .shift();
+  console.error('VARIANT FOUND', variant)
+  // const foundVariant = getProductOptionVariant({
+  //   selectedOptionId,
+  //   variants
+  // });
+  const result = variant || product;
+
+  console.warn("found variant:", variant);
+
+  return getProductUrl(result);
+}
 
 export function getProductOptionUrl({
   selectedOptionId,
@@ -49,5 +67,5 @@ export function getProductOptionUrl({
 
   console.warn("found variant:", foundVariant);
 
-  return getPrettyUrl(foundVariant);
+  return getProductUrl(foundVariant);
 }
diff --git a/packages/helpers/src/product/getProductOptions.ts b/packages/helpers/src/product/getProductOptions.ts
index 6b9034f95..0a37583e6 100644
--- a/packages/helpers/src/product/getProductOptions.ts
+++ b/packages/helpers/src/product/getProductOptions.ts
@@ -57,9 +57,9 @@ export function getProductOptions({
         if (!typeOptions.has(option.id)) {
           typeOptions.set(option.id, {
             label: option.name,
-            id: variant.id,
-            code: option.group && option.group.name,
-            active: findOptionForOtherAttributes(selected, variant, attribute)
+            id: option.id
+            // code: option.group && option.group.name
+            // active: findOptionForOtherAttributes(selected, variant, attribute)
           });
         }
       }
diff --git a/packages/helpers/src/product/getProductUrl.ts b/packages/helpers/src/product/getProductUrl.ts
index 2468764ec..1916be950 100644
--- a/packages/helpers/src/product/getProductUrl.ts
+++ b/packages/helpers/src/product/getProductUrl.ts
@@ -1,5 +1,10 @@
 import { Product } from "@shopware-pwa/shopware-6-client";
 
-export function getProductUrl(product: Product): string {
-  return product ? `/detail/${product.id}` : `/`;
+export function getProductUrl(product: Product | null): string {
+  if (!product) return "/";
+  const seoUrl =
+    product.seoUrls &&
+    product.seoUrls.length &&
+    product.seoUrls[0].seoPathInfo;
+  return seoUrl ? `/${seoUrl}` : `/detail/${product.id}`;
 }
diff --git a/packages/shopware-6-client/src/interfaces/models/content/product/Product.ts b/packages/shopware-6-client/src/interfaces/models/content/product/Product.ts
index ad0fbe51d..5952f1d0a 100644
--- a/packages/shopware-6-client/src/interfaces/models/content/product/Product.ts
+++ b/packages/shopware-6-client/src/interfaces/models/content/product/Product.ts
@@ -76,7 +76,7 @@ export interface Product {
   length: number | null;
   releaseDate: Date;
   categoryTree: [] | null;
-  optionsIds?: [] | null;
+  optionIds?: [];
   propertyIds: [] | null;
   additionalText?: string | null;
   name: string | null;

From f0d8aad136c6b855159a81db304ddb4272bfd0c5 Mon Sep 17 00:00:00 2001
From: patzick <tomczyk.patryk@gmail.com>
Date: Mon, 16 Dec 2019 12:32:48 +0100
Subject: [PATCH 3/6] refactor: temporary turn off seoURLs

---
 packages/helpers/src/product/getProductUrl.ts | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/helpers/src/product/getProductUrl.ts b/packages/helpers/src/product/getProductUrl.ts
index 1916be950..b5c6855a1 100644
--- a/packages/helpers/src/product/getProductUrl.ts
+++ b/packages/helpers/src/product/getProductUrl.ts
@@ -2,9 +2,10 @@ import { Product } from "@shopware-pwa/shopware-6-client";
 
 export function getProductUrl(product: Product | null): string {
   if (!product) return "/";
-  const seoUrl =
-    product.seoUrls &&
-    product.seoUrls.length &&
-    product.seoUrls[0].seoPathInfo;
+  const seoUrl = null; // TODO change after fixing URL resolver
+  // const seoUrl =
+  //   product.seoUrls &&
+  //   product.seoUrls.length &&
+  //   product.seoUrls[0].seoPathInfo;
   return seoUrl ? `/${seoUrl}` : `/detail/${product.id}`;
 }

From 2968b58de76f89edff392df40e69078a190323f6 Mon Sep 17 00:00:00 2001
From: patzick <tomczyk.patryk@gmail.com>
Date: Mon, 16 Dec 2019 12:49:06 +0100
Subject: [PATCH 4/6] refactor: cleanup

---
 .../composables/src/hooks/useCms/index.ts     |  1 -
 .../components/views/ProductView.vue          | 47 +++---------
 .../helpers/src/product/getProductOption.ts   |  1 -
 .../src/product/getProductOptionUrl.ts        | 71 -------------------
 .../helpers/src/product/getProductOptions.ts  | 38 +---------
 .../src/product/getProductOptionsUrl.ts       | 23 ++++++
 packages/helpers/src/product/index.ts         |  2 +-
 .../helpers/src/product/isProductSimple.ts    |  5 --
 8 files changed, 35 insertions(+), 153 deletions(-)
 delete mode 100644 packages/helpers/src/product/getProductOptionUrl.ts
 create mode 100644 packages/helpers/src/product/getProductOptionsUrl.ts

diff --git a/packages/composables/src/hooks/useCms/index.ts b/packages/composables/src/hooks/useCms/index.ts
index ee4565063..fbd51be00 100644
--- a/packages/composables/src/hooks/useCms/index.ts
+++ b/packages/composables/src/hooks/useCms/index.ts
@@ -28,7 +28,6 @@ export const useCms = (): any => {
         }
       });
       vuexStore.commit("SET_PAGE", result);
-      return result;
     } catch (e) {
       error.value = e;
       console.error("Problem with fetching CMS data", e.message);
diff --git a/packages/default-theme/components/views/ProductView.vue b/packages/default-theme/components/views/ProductView.vue
index 0db0270f6..b823fb1bd 100644
--- a/packages/default-theme/components/views/ProductView.vue
+++ b/packages/default-theme/components/views/ProductView.vue
@@ -35,7 +35,7 @@
           <div class="product-details__action">
             <button class="sf-action" v-if="sizes.length > 0">Size guide</button>
           </div>
-          <div class="product-details__section">
+          <div class="product-details__section" v-if="!hasChildren">
             <SfProperty v-if="color"
             name="Color"
             :value="color.name"/>
@@ -175,7 +175,6 @@ import {
   getProductRegularPrice,
   isProductSimple, 
   getProductSpecialPrice,
-  getProductOptionUrl,
   getProductOptionsUrl
   } from "@shopware-pwa/helpers";
 import SwProductGallery from '../cms/elements/SwProductGallery'
@@ -228,7 +227,6 @@ export default {
     }
   },
   async mounted() {
-    console.error('MOUNTED PRODUCT!!!!')
     // TODO remove when page resolver is fully done
     const associations = {
       "associations[media][]": true,
@@ -242,11 +240,15 @@ export default {
 
     const { loadAssociations, product } = useProduct(this.page.product);
     this.productWithAssociations = product
-    loadAssociations(associations)
+    await loadAssociations(associations)
+    const color = this.colors.find(color => this.product.optionIds.includes(color.id))
+    const size = this.sizes.find(size => this.product.optionIds.includes(size.id))
+    this.selectedColor = color && color.id
+    this.selectedSize = size && size.id
   },
   computed: {
     product() {
-      return this.productWithAssociations && this.productWithAssociations.value || this.page.product
+      return this.productWithAssociations ? this.productWithAssociations.value : this.page.product
     },
     price() {
       return getProductRegularPrice({product: this.product})
@@ -265,7 +267,7 @@ export default {
       return this.product && this.product.ratingAverage
     },
     hasChildren() {
-      return this.product && this.product.childCount > 0
+      return this.product && this.product.children && this.product.children.length
     },
     isSimple() {
       return isProductSimple({product: this.product})
@@ -325,37 +327,8 @@ export default {
   },
   watch: {
     selectedOptions(selected) {
-        // const distinctOptions = []
-
-        // for (const attributeKey in selected) {
-        //   if (!selected.hasOwnProperty(attributeKey)) {
-        //     continue;
-        //   }
-
-        //   distinctOptions.push(selected[attributeKey])
-        // }
-
-        console.error('SELECTED CHANGED', selected)
-        const utl = getProductOptionsUrl({product: this.product, options: selected})
-        console.error("URL ---------> " + utl)
-        this.$router.push(utl);
-
-        // console.warn('SELECTED OPTIONS SET: ',
-        //   [...new Set(distinctOptions)]
-        // )
-
-      // if ([...new Set(distinctOptions)].length === 1) {
-      //   console.warn('push: ', {
-      //       selectedOptionId: distinctOptions.shift(),
-      //       variants: this.product.children
-      //     })
-      //   this.$router.push(getProductOptionUrl({
-      //       selectedOptionId: distinctOptions.shift(),
-      //       variants: this.product.children
-      //     }
-      //     ))
-      // }
-
+      const url = getProductOptionsUrl({product: this.product, options: selected})
+      this.$router.push(url);
     }
   }
 
diff --git a/packages/helpers/src/product/getProductOption.ts b/packages/helpers/src/product/getProductOption.ts
index 1c38e3fdb..b084c41aa 100644
--- a/packages/helpers/src/product/getProductOption.ts
+++ b/packages/helpers/src/product/getProductOption.ts
@@ -8,7 +8,6 @@ export function getProductOption({
   | PropertyGroupOption
   | null
   | undefined {
-  console.warn("getProductOption", product && product.options);
   return (
     product &&
     product.options &&
diff --git a/packages/helpers/src/product/getProductOptionUrl.ts b/packages/helpers/src/product/getProductOptionUrl.ts
deleted file mode 100644
index eec8df008..000000000
--- a/packages/helpers/src/product/getProductOptionUrl.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import { Product } from "@shopware-pwa/shopware-6-client";
-import { getProductUrl } from "./getProductUrl";
-
-export function getProductOptionVariant({
-  selectedOptionId,
-  variants
-}: {
-  variants?: Product[];
-  selectedOptionId?: string;
-} = {}): Product | null {
-  if (!variants) {
-    return null;
-  }
-
-  for (const variant of variants) {
-    if (!variant.options) {
-      continue;
-    }
-    if (variant.id == selectedOptionId) {
-      console.warn("LINK: ", getProductUrl(variant));
-      return variant;
-    }
-  }
-
-  return null;
-}
-export function getProductOptionsUrl({
-  options,
-  product
-}: {
-  options?: string[];
-  product?: Product;
-} = {}): string {
-  if (!product) return "";
-  const variant =
-    options &&
-    product.children
-      .filter(
-        variant =>
-          variant.optionIds &&
-          variant.optionIds.every(optionId => options.includes(optionId))
-      )
-      .shift();
-  console.error('VARIANT FOUND', variant)
-  // const foundVariant = getProductOptionVariant({
-  //   selectedOptionId,
-  //   variants
-  // });
-  const result = variant || product;
-
-  console.warn("found variant:", variant);
-
-  return getProductUrl(result);
-}
-
-export function getProductOptionUrl({
-  selectedOptionId,
-  variants
-}: {
-  variants?: Product[];
-  selectedOptionId?: string;
-} = {}): string | false | null | undefined {
-  const foundVariant = getProductOptionVariant({
-    selectedOptionId,
-    variants
-  });
-
-  console.warn("found variant:", foundVariant);
-
-  return getProductUrl(foundVariant);
-}
diff --git a/packages/helpers/src/product/getProductOptions.ts b/packages/helpers/src/product/getProductOptions.ts
index 0a37583e6..c70f932aa 100644
--- a/packages/helpers/src/product/getProductOptions.ts
+++ b/packages/helpers/src/product/getProductOptions.ts
@@ -1,46 +1,12 @@
 import { Product } from "@shopware-pwa/shopware-6-client";
 import { UiProductOption } from "@shopware-pwa/helpers";
 
-const findOptionForOtherAttributes = (
-  selected: any,
-  variant: any,
-  attribute?: string
-): boolean => {
-  if (!attribute) {
-    return true;
-  }
-
-  const selectedAttributesCount = Object.keys(selected).length;
-  let nullableAttributesCount = 0;
-
-  for (const attributeKey in selected) {
-    if (!selected.hasOwnProperty(attributeKey)) {
-      continue;
-    }
-
-    if (selected[attributeKey] === null) {
-      nullableAttributesCount++;
-    }
-
-    if (attributeKey == attribute) {
-      continue;
-    }
-
-    if (variant.id === selected[attributeKey]) {
-      return true;
-    }
-  }
-
-  return selectedAttributesCount == nullableAttributesCount || false;
-};
 export function getProductOptions({
   product,
-  attribute,
-  selected
+  attribute
 }: {
   product?: Product;
   attribute?: string;
-  selected?: any;
 } = {}): UiProductOption[] {
   if (!product || !product.children) {
     return [];
@@ -58,8 +24,6 @@ export function getProductOptions({
           typeOptions.set(option.id, {
             label: option.name,
             id: option.id
-            // code: option.group && option.group.name
-            // active: findOptionForOtherAttributes(selected, variant, attribute)
           });
         }
       }
diff --git a/packages/helpers/src/product/getProductOptionsUrl.ts b/packages/helpers/src/product/getProductOptionsUrl.ts
new file mode 100644
index 000000000..47af0b522
--- /dev/null
+++ b/packages/helpers/src/product/getProductOptionsUrl.ts
@@ -0,0 +1,23 @@
+import { Product } from "@shopware-pwa/shopware-6-client";
+import { getProductUrl } from "./getProductUrl";
+
+export function getProductOptionsUrl({
+  product,
+  options
+}: {
+  product?: Product;
+  options?: string[];
+} = {}): string {
+  if (!product) return "";
+  const variant =
+    options &&
+    product.children
+      .filter(
+        variant =>
+          variant.optionIds &&
+          variant.optionIds.every(optionId => options.includes(optionId))
+      )
+      .shift();
+  const result = variant || product;
+  return getProductUrl(result);
+}
diff --git a/packages/helpers/src/product/index.ts b/packages/helpers/src/product/index.ts
index 57ae78c33..0cb906adc 100644
--- a/packages/helpers/src/product/index.ts
+++ b/packages/helpers/src/product/index.ts
@@ -7,5 +7,5 @@ export * from "./getProductOption";
 export * from "./getProductRegularPrice";
 export * from "./getProductSpecialPrice";
 export * from "./isProductSimple";
-export * from "./getProductOptionUrl";
+export * from "./getProductOptionsUrl";
 export * from "./getProductUrl";
diff --git a/packages/helpers/src/product/isProductSimple.ts b/packages/helpers/src/product/isProductSimple.ts
index 92a28a954..38260bf23 100644
--- a/packages/helpers/src/product/isProductSimple.ts
+++ b/packages/helpers/src/product/isProductSimple.ts
@@ -3,10 +3,5 @@ import { Product } from "@shopware-pwa/shopware-6-client";
 export function isProductSimple({
   product
 }: { product?: Product } = {}): boolean {
-  console.warn(
-    "isProductsimple",
-    product && product.parentId,
-    product && product.id
-  );
   return !!product && !!product.parentId && product.id !== product.parentId;
 }

From 4514f97c964c00a562adf828aa22202f38ec22ea Mon Sep 17 00:00:00 2001
From: patzick <tomczyk.patryk@gmail.com>
Date: Mon, 16 Dec 2019 14:43:48 +0100
Subject: [PATCH 5/6] test: add tests

---
 .../composables/src/hooks/useProduct/index.ts |  2 +
 .../components/views/ProductView.vue          | 24 +++----
 .../product/getProductOption.spec.ts          |  7 +-
 .../product/getProductOptions.spec.ts         |  2 +-
 .../product/getProductOptionsUrl.spec.ts      | 67 +++++++++++++++++++
 .../helpers/src/product/getProductOptions.ts  |  5 +-
 .../src/product/getProductOptionsUrl.ts       |  1 +
 packages/helpers/src/ui-interfaces.ts         |  1 -
 8 files changed, 86 insertions(+), 23 deletions(-)
 create mode 100644 packages/helpers/__tests__/product/getProductOptionsUrl.spec.ts

diff --git a/packages/composables/src/hooks/useProduct/index.ts b/packages/composables/src/hooks/useProduct/index.ts
index af71af411..c67721ebf 100644
--- a/packages/composables/src/hooks/useProduct/index.ts
+++ b/packages/composables/src/hooks/useProduct/index.ts
@@ -29,6 +29,7 @@ export const useProduct = (
     const {
       name,
       description,
+      options,
       media,
       cover,
       properties,
@@ -41,6 +42,7 @@ export const useProduct = (
     product.value = Object.assign({}, product.value, {
       name,
       description,
+      options,
       media,
       cover,
       properties,
diff --git a/packages/default-theme/components/views/ProductView.vue b/packages/default-theme/components/views/ProductView.vue
index b823fb1bd..f06dcc92e 100644
--- a/packages/default-theme/components/views/ProductView.vue
+++ b/packages/default-theme/components/views/ProductView.vue
@@ -51,10 +51,9 @@
               class="sf-select--bordered product-details__attribute"
             >
               <SfSelectOption
-                id="size_option"
                 v-for="size in sizes"
-                :key="size.id"
-                :value="size.id"
+                :key="size.code"
+                :value="size.code"
               >
                 <SfProductOption :label="size.label" />
               </SfSelectOption>
@@ -66,10 +65,9 @@
               class="sf-select--bordered product-details__attribute"
             >
               <SfSelectOption
-                id="color_option"
                 v-for="color in colors"
-                :key="color.id"
-                :value="color.id"
+                :key="color.code"
+                :value="color.code"
               >
                 <SfProductOption :label="color.label" :color="color.label" />
               </SfSelectOption>
@@ -241,10 +239,10 @@ export default {
     const { loadAssociations, product } = useProduct(this.page.product);
     this.productWithAssociations = product
     await loadAssociations(associations)
-    const color = this.colors.find(color => this.product.optionIds.includes(color.id))
-    const size = this.sizes.find(size => this.product.optionIds.includes(size.id))
-    this.selectedColor = color && color.id
-    this.selectedSize = size && size.id
+    const color = this.colors.find(color => this.product.optionIds.includes(color.code))
+    const size = this.sizes.find(size => this.product.optionIds.includes(size.code))
+    this.selectedColor = color && color.code
+    this.selectedSize = size && size.code
   },
   computed: {
     product() {
@@ -299,18 +297,16 @@ export default {
       })
     },
     colors() {
-      const colorOptions = getProductOptions({
+      return getProductOptions({
         product: this.product,
         attribute: "color"
       })
-      return colorOptions
     },
     sizes() {
-      const sizeOptions = getProductOptions({
+      return getProductOptions({
         product: this.product,
         attribute: "size"
       })
-      return sizeOptions
     },
     reviews() {
       return getProductReviews({product: this.product})
diff --git a/packages/helpers/__tests__/product/getProductOption.spec.ts b/packages/helpers/__tests__/product/getProductOption.spec.ts
index 438c12619..d620cbc84 100644
--- a/packages/helpers/__tests__/product/getProductOption.spec.ts
+++ b/packages/helpers/__tests__/product/getProductOption.spec.ts
@@ -21,15 +21,12 @@ describe("Shopware helpers - getProductOption", () => {
       ]
     };
 
-    const productOption = getProductOption({
+    const productOption: any = getProductOption({
       product: productWithOptions,
       attribute: "color"
     });
     expect(productOption).toBeTruthy();
-    expect(productOption).toHaveProperty("id");
-    if (productOption && productOption.id) {
-      expect(productOption.id).toEqual("04095b39ef07472ebd7547800c40bfd4");
-    }
+    expect(productOption.id).toEqual("04095b39ef07472ebd7547800c40bfd4");
   });
 
   it("should returns null on no options available", () => {
diff --git a/packages/helpers/__tests__/product/getProductOptions.spec.ts b/packages/helpers/__tests__/product/getProductOptions.spec.ts
index 4f7673646..9c4cae922 100644
--- a/packages/helpers/__tests__/product/getProductOptions.spec.ts
+++ b/packages/helpers/__tests__/product/getProductOptions.spec.ts
@@ -39,9 +39,9 @@ describe("Shopware helpers - getProductOptions", () => {
       attribute: "color"
     });
     expect(productOptions).toHaveLength(1);
-    expect(productOptions[0]).toHaveProperty("color");
     expect(productOptions[0]).toHaveProperty("label");
     expect(productOptions[0]).toHaveProperty("value");
+    expect(productOptions[0]).toHaveProperty("code");
   });
 
   it("should returns return an empty array if no children", () => {
diff --git a/packages/helpers/__tests__/product/getProductOptionsUrl.spec.ts b/packages/helpers/__tests__/product/getProductOptionsUrl.spec.ts
new file mode 100644
index 000000000..03307e12a
--- /dev/null
+++ b/packages/helpers/__tests__/product/getProductOptionsUrl.spec.ts
@@ -0,0 +1,67 @@
+import { getProductOptionsUrl } from "@shopware-pwa/helpers";
+
+describe("Shopware helpers - getProductOptionsUrl", () => {
+  it("should return an empty string when no product", () => {
+    const result = getProductOptionsUrl();
+    expect(result).toEqual("");
+  });
+
+  it("should return product url when no options", () => {
+    const result = getProductOptionsUrl({
+      product: {
+        id: "123321"
+      }
+    } as any);
+    expect(result).toEqual("/detail/123321");
+  });
+
+  it("should return product url when has no children", () => {
+    const result = getProductOptionsUrl({
+      product: {
+        id: "123321"
+      },
+      options: ["qwe", "ewq"]
+    } as any);
+    expect(result).toEqual("/detail/123321");
+  });
+
+  it("should return product url when options don`t match", () => {
+    const result = getProductOptionsUrl({
+      product: {
+        id: "123321",
+        children: [
+          {
+            id: "qqq",
+            optionIds: ["foo", "bar"]
+          },
+          {
+            id: "eee",
+            optionIds: ["qwe", "ewq"]
+          }
+        ]
+      },
+      options: ["some", "other"]
+    } as any);
+    expect(result).toEqual("/detail/123321");
+  });
+
+  it("should return variant url when options match", () => {
+    const result = getProductOptionsUrl({
+      product: {
+        id: "123321",
+        children: [
+          {
+            id: "qqq",
+            optionIds: ["foo", "bar"]
+          },
+          {
+            id: "eee",
+            optionIds: ["qwe", "ewq"]
+          }
+        ]
+      },
+      options: ["qwe", "ewq"]
+    } as any);
+    expect(result).toEqual("/detail/eee");
+  });
+});
diff --git a/packages/helpers/src/product/getProductOptions.ts b/packages/helpers/src/product/getProductOptions.ts
index c70f932aa..7d080481e 100644
--- a/packages/helpers/src/product/getProductOptions.ts
+++ b/packages/helpers/src/product/getProductOptions.ts
@@ -23,8 +23,9 @@ export function getProductOptions({
         if (!typeOptions.has(option.id)) {
           typeOptions.set(option.id, {
             label: option.name,
-            id: option.id
-          });
+            code: option.id,
+            value: option.name
+          } as UiProductOption);
         }
       }
     }
diff --git a/packages/helpers/src/product/getProductOptionsUrl.ts b/packages/helpers/src/product/getProductOptionsUrl.ts
index 47af0b522..1636e3cb6 100644
--- a/packages/helpers/src/product/getProductOptionsUrl.ts
+++ b/packages/helpers/src/product/getProductOptionsUrl.ts
@@ -11,6 +11,7 @@ export function getProductOptionsUrl({
   if (!product) return "";
   const variant =
     options &&
+    product.children &&
     product.children
       .filter(
         variant =>
diff --git a/packages/helpers/src/ui-interfaces.ts b/packages/helpers/src/ui-interfaces.ts
index 1f2cf3019..21eeb1917 100644
--- a/packages/helpers/src/ui-interfaces.ts
+++ b/packages/helpers/src/ui-interfaces.ts
@@ -12,7 +12,6 @@ export interface UiProductOption {
   value: string;
   code: string;
   [attribute: string]: string;
-  active?: boolean;
 }
 
 export interface UiProductProperty {

From 2ad9cad48b494b45ec3dad964b76f35ad8267e05 Mon Sep 17 00:00:00 2001
From: patzick <tomczyk.patryk@gmail.com>
Date: Mon, 16 Dec 2019 15:05:00 +0100
Subject: [PATCH 6/6] chore: update product url without SEO

---
 packages/helpers/src/product/getProductUrl.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/helpers/src/product/getProductUrl.ts b/packages/helpers/src/product/getProductUrl.ts
index b5c6855a1..3586394cf 100644
--- a/packages/helpers/src/product/getProductUrl.ts
+++ b/packages/helpers/src/product/getProductUrl.ts
@@ -2,10 +2,11 @@ import { Product } from "@shopware-pwa/shopware-6-client";
 
 export function getProductUrl(product: Product | null): string {
   if (!product) return "/";
-  const seoUrl = null; // TODO change after fixing URL resolver
+  // TODO change after fixing URL resolver
   // const seoUrl =
   //   product.seoUrls &&
   //   product.seoUrls.length &&
   //   product.seoUrls[0].seoPathInfo;
-  return seoUrl ? `/${seoUrl}` : `/detail/${product.id}`;
+  // return seoUrl ? `/${seoUrl}` : `/detail/${product.id}`;
+  return `/detail/${product.id}`;
 }