Add ability to modify sku

src/products/components/ProductVariantCreateDialog/ProductVariantCreateContent.tsx

@@ -121,6 +121,14 @@ const ProductVariantCreateContent: React.FC<
             attributes={selectedAttributes}
             currencySymbol={currencySymbol}
             data={data}
+            onVariantDataChange={(variantIndex, field, value) =>
+              dispatchFormDataAction({
+                field,
+                type: "changeVariantData",
+                value,
+                variantIndex
+              })
+            }
           />
         )}
       </div>

src/products/components/ProductVariantCreateDialog/ProductVariantCreateDialog.tsx

@@ -25,6 +25,51 @@ const useStyles = makeStyles((theme: Theme) => ({
   }
 }));
 
+function canHitNext(
+  step: ProductVariantCreateStep,
+  data: ProductVariantCreateFormData
+): boolean {
+  switch (step) {
+    case "attributes":
+      return data.attributes.length > 0;
+    case "values":
+      return data.attributes.every(attribute => attribute.values.length > 0);
+    case "prices":
+      if (data.price.all) {
+        if (data.price.value === "") {
+          return false;
+        }
+      } else {
+        if (
+          data.price.attribute === "" ||
+          data.price.values.some(attributeValue => attributeValue.value === "")
+        ) {
+          return false;
+        }
+      }
+
+      if (data.stock.all) {
+        if (data.stock.value === "") {
+          return false;
+        }
+      } else {
+        if (
+          data.stock.attribute === "" ||
+          data.stock.values.some(attributeValue => attributeValue.value === "")
+        ) {
+          return false;
+        }
+      }
+
+      return true;
+    case "summary":
+      return data.variants.every(variant => variant.sku !== "");
+
+    default:
+      return false;
+  }
+}
+
 export interface ProductVariantCreateDialogProps
   extends Omit<
     ProductVariantCreateContentProps,
@@ -110,13 +155,19 @@ const ProductVariantCreateDialog: React.FC<
           <Button
             className={classes.button}
             color="primary"
+            disabled={!canHitNext(step, data)}
             variant="contained"
             onClick={handleNextStep}
           >
             <FormattedMessage defaultMessage="Next" description="button" />
           </Button>
         ) : (
-          <Button className={classes.button} variant="contained">
+          <Button
+            className={classes.button}
+            color="primary"
+            disabled={!canHitNext(step, data)}
+            variant="contained"
+          >
             <FormattedMessage
               defaultMessage="Create"
               description="create multiple variants, button"

src/products/components/ProductVariantCreateDialog/ProductVariantCreateSummary.tsx

@@ -20,17 +20,24 @@ import Hr from "@saleor/components/Hr";
 import { ProductVariantCreateInput } from "@saleor/types/globalTypes";
 import { ProductDetails_product_productType_variantAttributes } from "../../types/ProductDetails";
 import { ProductVariantCreateFormData } from "./form";
+import { VariantField } from "./reducer";
 
 export interface ProductVariantCreateSummaryProps {
   attributes: ProductDetails_product_productType_variantAttributes[];
   currencySymbol: string;
   data: ProductVariantCreateFormData;
+  onVariantDataChange: (
+    variantIndex: number,
+    field: VariantField,
+    value: string
+  ) => void;
 }
 
 const colors = [blue, cyan, green, purple, yellow].map(color => color[800]);
 
 const useStyles = makeStyles((theme: Theme) => ({
   attributeValue: {
+    display: "inline-block",
     marginRight: theme.spacing.unit
   },
   col: {
@@ -84,7 +91,7 @@ function getVariantName(
 const ProductVariantCreateSummary: React.FC<
   ProductVariantCreateSummaryProps
 > = props => {
-  const { attributes, currencySymbol, data } = props;
+  const { attributes, currencySymbol, data, onVariantDataChange } = props;
   const classes = useStyles(props);
 
   return (
@@ -123,7 +130,7 @@ const ProductVariantCreateSummary: React.FC<
           </TableRow>
         </TableHead>
         <TableBody>
-          {data.variants.map(variant => (
+          {data.variants.map((variant, variantIndex) => (
             <TableRow
               key={variant.attributes
                 .map(attribute => attribute.values[0])
@@ -152,6 +159,13 @@ const ProductVariantCreateSummary: React.FC<
                   }}
                   fullWidth
                   value={variant.quantity}
+                  onChange={event =>
+                    onVariantDataChange(
+                      variantIndex,
+                      "stock",
+                      event.target.value
+                    )
+                  }
                 />
               </TableCell>
               <TableCell className={classNames(classes.col, classes.colPrice)}>
@@ -166,6 +180,13 @@ const ProductVariantCreateSummary: React.FC<
                   }}
                   fullWidth
                   value={variant.priceOverride}
+                  onChange={event =>
+                    onVariantDataChange(
+                      variantIndex,
+                      "price",
+                      event.target.value
+                    )
+                  }
                 />
               </TableCell>
               <TableCell className={classNames(classes.col, classes.colSku)}>
@@ -173,6 +194,9 @@ const ProductVariantCreateSummary: React.FC<
                   className={classes.input}
                   fullWidth
                   value={variant.sku}
+                  onChange={event =>
+                    onVariantDataChange(variantIndex, "sku", event.target.value)
+                  }
                 />
               </TableCell>
             </TableRow>

src/products/components/ProductVariantCreateDialog/createVariants.ts

@@ -47,7 +47,8 @@ function createVariant(
     })),
     priceOverride,
     product: "",
-    quantity
+    quantity,
+    sku: ""
   };
 }