diff --git a/src/products/components/ProductCreatePage/ProductCreatePage.tsx b/src/products/components/ProductCreatePage/ProductCreatePage.tsx index 2b5f536ba..ffebe8145 100644 --- a/src/products/components/ProductCreatePage/ProductCreatePage.tsx +++ b/src/products/components/ProductCreatePage/ProductCreatePage.tsx @@ -128,151 +128,156 @@ export const ProductCreatePage: React.FC = ({ taxTypes={taxTypeChoices} warehouses={warehouses} > - {({ change, data, handlers, hasChanged, submit }) => ( - - - {intl.formatMessage(sectionNames.products)} - - - -
- - - {data.attributes.length > 0 && ( - { + // Comparing explicitly to false because `hasVariants` can be undefined + const isSimpleProduct = data.productType?.hasVariants === false; + + return ( + + + {intl.formatMessage(sectionNames.products)} + + + +
+ - )} - - {!data.productType?.hasVariants && ( - <> - + {data.attributes.length > 0 && ( + - - - - - - )} - - - -
-
- - - - - -
-
- -
- )} + )} + + {isSimpleProduct && ( + <> + + + + + + + )} + + + +
+
+ + + + + +
+
+ +
+ ); + }} ); }; diff --git a/src/products/components/ProductCreatePage/index.ts b/src/products/components/ProductCreatePage/index.ts index 7174a4e9d..ba27080d3 100644 --- a/src/products/components/ProductCreatePage/index.ts +++ b/src/products/components/ProductCreatePage/index.ts @@ -1,2 +1,3 @@ export { default } from "./ProductCreatePage"; export * from "./ProductCreatePage"; +export * from "./form"; diff --git a/src/products/components/ProductStocks/ProductStocks.tsx b/src/products/components/ProductStocks/ProductStocks.tsx index f06c7bd1d..4484b6840 100644 --- a/src/products/components/ProductStocks/ProductStocks.tsx +++ b/src/products/components/ProductStocks/ProductStocks.tsx @@ -127,9 +127,10 @@ const ProductStocks: React.FC = ({ const anchor = React.useRef(); const [isExpanded, setExpansionState] = React.useState(false); - const warehousesToAssign = warehouses.filter( - warehouse => !stocks.some(stock => stock.id === warehouse.id) - ); + const warehousesToAssign = + warehouses?.filter( + warehouse => !stocks.some(stock => stock.id === warehouse.id) + ) || []; const formErrors = getFormErrors(["sku"], errors); return ( @@ -187,7 +188,7 @@ const ProductStocks: React.FC = ({ - {!warehouses.length && ( + {!warehouses?.length && ( {hasVariants ? ( <> @@ -219,7 +220,7 @@ const ProductStocks: React.FC = ({ )} - {warehouses.length > 0 && ( + {warehouses?.length > 0 && ( diff --git a/src/products/components/ProductVariantPage/ProductVariantPage.tsx b/src/products/components/ProductVariantPage/ProductVariantPage.tsx index e2fa15970..09b9d4497 100644 --- a/src/products/components/ProductVariantPage/ProductVariantPage.tsx +++ b/src/products/components/ProductVariantPage/ProductVariantPage.tsx @@ -90,13 +90,12 @@ const ProductVariantPage: React.FC = ({ const [isModalOpened, setModalStatus] = React.useState(false); const toggleModal = () => setModalStatus(!isModalOpened); - const variantImages = variant?.images?.map(image => image.id) || []; - const productImages = - variant?.product?.images?.sort((prev, next) => - prev.sortOrder > next.sortOrder ? 1 : -1 - ) || []; + const variantImages = variant?.images?.map(image => image.id); + const productImages = variant?.product?.images?.sort((prev, next) => + prev.sortOrder > next.sortOrder ? 1 : -1 + ); const images = productImages - .filter(image => variantImages.indexOf(image.id) !== -1) + ?.filter(image => variantImages.indexOf(image.id) !== -1) .sort((prev, next) => (prev.sortOrder > next.sortOrder ? 1 : -1)); return ( diff --git a/src/storybook/stories/products/ProductCreatePage.tsx b/src/storybook/stories/products/ProductCreatePage.tsx index 4a1cd132d..dd02b1e0d 100644 --- a/src/storybook/stories/products/ProductCreatePage.tsx +++ b/src/storybook/stories/products/ProductCreatePage.tsx @@ -5,7 +5,7 @@ import { storiesOf } from "@storybook/react"; import React from "react"; import ProductCreatePage, { - ProductCreatePageSubmitData + ProductCreateFormData } from "../../../products/components/ProductCreatePage"; import { product as productFixture } from "../../../products/fixtures"; import { productTypes } from "../../../productTypes/fixtures"; @@ -74,17 +74,15 @@ storiesOf("Views / Products / Create product", module) "productType", "category", "sku" - ] as Array).map( - field => ({ - __typename: "ProductError", - attributes: - field === "attributes" - ? [productTypes[0].productAttributes[0].id] - : null, - code: ProductErrorCode.INVALID, - field - }) - )} + ] as Array).map(field => ({ + __typename: "ProductError", + attributes: + field === "attributes" + ? [productTypes[0].productAttributes[0].id] + : null, + code: ProductErrorCode.INVALID, + field + }))} header="Add product" collections={product.collections} fetchCategories={() => undefined} @@ -94,7 +92,7 @@ storiesOf("Views / Products / Create product", module) fetchMoreCollections={fetchMoreProps} fetchMoreProductTypes={fetchMoreProps} initial={{ - productType: productTypes[0].id + productType: productTypes[0] }} productTypes={productTypes} categories={[product.category]}