Mapped options to variants

components/product/ProductView/ProductView.tsx

@@ -119,7 +119,8 @@ const ProductView: FC<Props> = ({ product }) => {
                       <Swatch
                         key={`${opt.id}-${i}`}
                         active={v.label.toLowerCase() === active}
-                        variant={opt.displayName}
+                        // variant={opt.displayName}
+                        variant={opt.variant}
                         color={v.hexColors ? v.hexColors[0] : ''}
                         label={v.label}
                         onClick={() => {

framework/saleor/product/get-product.ts

@@ -22,10 +22,8 @@ const getProduct = async (options: {
     variables,
   })
 
-  const { product } = data
-
   return {
-    product: product ? normalizeProduct(product) : null,
+    product: data?.product ? normalizeProduct(data.product) : null,
   }
 }
 

framework/saleor/utils/normalize.ts

@@ -21,33 +21,41 @@ const money = ({ amount, currency }: Money) => {
 }
 
 const normalizeProductOptions = (options: ProductVariant[]) => {
-  const optionNames = options
+  return options
-    .map((option) => {
+    ?.map((option) => option?.attributes)
-      // can a variant have multiple attributes?
+    .flat(1)
-      return option.attributes[0].attribute.name
+    .reduce<any>((acc, x) => {
-    })
+      if (
-    .filter((x, i, a) => a.indexOf(x) == i)
+        acc.find(({ displayName }: any) => displayName === x.attribute.name)
-
+      ) {
-  return optionNames.map((displayName) => {
+        return acc.map((opt: any) => {
-    const matchedOptions = options.filter(
+          return opt.displayName === x.attribute.name
-      ({ attributes }) => attributes[0].attribute.name === displayName // can a variant have multiple attributes?
+            ? {
-    )
+                ...opt,
-
+                values: [
-    return {
+                  ...opt.values,
-      __typename: 'MultipleChoiceOption',
+                  ...x.values.map((value: any) => ({
-      // next-commerce can only display labels for options with displayName 'size', or colors
+                    label: value?.name,
-      displayName: displayName?.toLowerCase().includes('size')
-        ? 'size'
-        : displayName,
-      values: matchedOptions.map(({ name }) => ({
-        label: name,
                   })),
+                ],
               }
+            : opt
         })
+      }
+
+      return acc.concat({
+        __typename: 'MultipleChoiceOption',
+        displayName: x.attribute.name,
+        variant: 'size',
+        values: x.values.map((value: any) => ({
+          label: value?.name,
+        })),
+      })
+    }, [])
 }
 
-const normalizeProductVariants = (variants: ProductVariant[]) =>
+const normalizeProductVariants = (variants: ProductVariant[]) => {
-  variants?.map((variant) => {
+  return variants?.map((variant) => {
     const { id, sku, name, pricing } = variant
     const price = pricing?.price?.net && money(pricing.price.net)?.value
 
@@ -61,6 +69,7 @@ const normalizeProductVariants = (variants: ProductVariant[]) =>
       options: normalizeProductOptions([variant]),
     }
   })
+}
 
 export function normalizeProduct(productNode: SaleorProduct): Product {
   const {