diff --git a/src/components/ProductList/ProductList.tsx b/src/components/ProductList/ProductList.tsx index a0d91d610..b2fedbd03 100644 --- a/src/components/ProductList/ProductList.tsx +++ b/src/components/ProductList/ProductList.tsx @@ -243,11 +243,15 @@ export const ProductList = withStyles(styles, { name: "ProductList" })( product.thumbnail.url)} + data-tc="name" > {maybe(() => product.name, )} - + {product && product.productType ? ( product.productType.name ) : ( @@ -256,7 +260,11 @@ export const ProductList = withStyles(styles, { name: "ProductList" })( - + product.isAvailable)} + > {product && maybe(() => product.isAvailable !== undefined) ? ( - {gridAttributesFromSettings.map(gridAttribute => ( - - {maybe(() => { - const attribute = product.attributes.find( - attribute => - attribute.attribute.id === - getAttributeIdFromColumnValue(gridAttribute) - ); - if (attribute) { - return attribute.values - .map(value => value.name) - .join(", "); - } - return "-"; - }, )} - - ))} + {gridAttributesFromSettings.map(gridAttribute => { + const attribute = maybe(() => + product.attributes.find( + attribute => + attribute.attribute.id === + getAttributeIdFromColumnValue(gridAttribute) + ) + ); + const attributeValues = attribute + ? attribute.values.map(value => value.name).join(", ") + : "-"; + + return ( + attribute.attribute.id + )} + > + {attribute ? attributeValues : } + + ); + })} {maybe(() => product.basePrice) && diff --git a/src/products/components/ProductVariants/ProductVariants.tsx b/src/products/components/ProductVariants/ProductVariants.tsx index 445673717..6f69046f2 100644 --- a/src/products/components/ProductVariants/ProductVariants.tsx +++ b/src/products/components/ProductVariants/ProductVariants.tsx @@ -22,7 +22,7 @@ import Money from "@saleor/components/Money"; import Skeleton from "@saleor/components/Skeleton"; import StatusLabel from "@saleor/components/StatusLabel"; import TableHead from "@saleor/components/TableHead"; -import { renderCollection } from "../../../misc"; +import { renderCollection, maybe } from "../../../misc"; import { ListActions } from "../../../types"; import { ProductDetails_product_variants } from "../../types/ProductDetails"; import { ProductVariant_costPrice } from "../../types/ProductVariant"; @@ -186,10 +186,16 @@ export const ProductVariants = withStyles(styles, { name: "ProductVariants" })( onChange={() => toggle(variant.id)} /> - + {variant ? variant.name || variant.sku : } - + variant.stockQuantity > 0 + )} + > {variant ? ( )} - + {variant ? variant.sku : } - + {variant ? ( variant.priceOverride ? ( diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap index cedf09a8c..e6afd2f19 100644 --- a/src/storybook/__snapshots__/Stories.test.ts.snap +++ b/src/storybook/__snapshots__/Stories.test.ts.snap @@ -88475,11 +88475,14 @@ Ctrl + K" Cordoba Oro
87192-94370 @@ -88513,11 +88517,14 @@ Ctrl + K" silver
69055-15190 @@ -91266,11 +91274,14 @@ Ctrl + K" Cordoba Oro
87192-94370 @@ -91304,11 +91316,14 @@ Ctrl + K" silver
69055-15190