Fix undefined and null objects handling

src/products/components/ProductCreatePage/ProductCreatePage.tsx

@@ -128,7 +128,11 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
       taxTypes={taxTypeChoices}
       warehouses={warehouses}
     >
-      {({ change, data, handlers, hasChanged, submit }) => (
+      {({ change, data, handlers, hasChanged, submit }) => {
+        // Comparing explicitly to false because `hasVariants` can be undefined
+        const isSimpleProduct = data.productType?.hasVariants === false;
+
+        return (
           <Container>
             <AppHeader onBack={onBack}>
               {intl.formatMessage(sectionNames.products)}
@@ -154,7 +158,7 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
                   />
                 )}
                 <CardSpacer />
-              {!data.productType?.hasVariants && (
+                {isSimpleProduct && (
                   <>
                     <ProductShipping
                       data={data}
@@ -272,7 +276,8 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
               disabled={disabled || !onSubmit || !hasChanged}
             />
           </Container>
-      )}
+        );
+      }}
     </ProductCreateForm>
   );
 };

src/products/components/ProductCreatePage/index.ts

@@ -1,2 +1,3 @@
 export { default } from "./ProductCreatePage";
 export * from "./ProductCreatePage";
+export * from "./form";

src/products/components/ProductStocks/ProductStocks.tsx

@@ -127,9 +127,10 @@ const ProductStocks: React.FC<ProductStocksProps> = ({
   const anchor = React.useRef<HTMLDivElement>();
   const [isExpanded, setExpansionState] = React.useState(false);
 
-  const warehousesToAssign = warehouses.filter(
+  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<ProductStocksProps> = ({
             </span>
           </div>
         </Typography>
-        {!warehouses.length && (
+        {!warehouses?.length && (
           <Typography color="textSecondary" className={classes.noWarehouseInfo}>
             {hasVariants ? (
               <>
@@ -219,7 +220,7 @@ const ProductStocks: React.FC<ProductStocksProps> = ({
           </Typography>
         )}
       </CardContent>
-      {warehouses.length > 0 && (
+      {warehouses?.length > 0 && (
         <Table>
           <TableHead>
             <TableRow>

src/products/components/ProductVariantPage/ProductVariantPage.tsx

@@ -90,13 +90,12 @@ const ProductVariantPage: React.FC<ProductVariantPageProps> = ({
   const [isModalOpened, setModalStatus] = React.useState(false);
   const toggleModal = () => setModalStatus(!isModalOpened);
 
-  const variantImages = variant?.images?.map(image => image.id) || [];
+  const variantImages = variant?.images?.map(image => image.id);
-  const productImages =
+  const productImages = variant?.product?.images?.sort((prev, next) =>
-    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 (

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,8 +74,7 @@ storiesOf("Views / Products / Create product", module)
         "productType",
         "category",
         "sku"
-      ] as Array<keyof ProductCreatePageSubmitData | "attributes">).map(
+      ] as Array<keyof ProductCreateFormData | "attributes">).map(field => ({
-        field => ({
         __typename: "ProductError",
         attributes:
           field === "attributes"
@@ -83,8 +82,7 @@ storiesOf("Views / Products / Create product", module)
             : 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]}