diff --git a/src/products/components/ProductVariantCreateDialog/ProductVariantCreateAttributes.tsx b/src/products/components/ProductVariantCreateDialog/ProductVariantCreateAttributes.tsx
deleted file mode 100644
index 48b658d9f..000000000
--- a/src/products/components/ProductVariantCreateDialog/ProductVariantCreateAttributes.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import Table from "@material-ui/core/Table";
-import TableBody from "@material-ui/core/TableBody";
-import TableCell from "@material-ui/core/TableCell";
-import TableRow from "@material-ui/core/TableRow";
-import makeStyles from "@material-ui/styles/makeStyles";
-import React from "react";
-import { FormattedMessage } from "react-intl";
-
-import Checkbox from "@saleor/components/Checkbox";
-import { maybe, renderCollection } from "@saleor/misc";
-import { ProductDetails_product_productType_variantAttributes } from "@saleor/products/types/ProductDetails";
-import { ProductVariantCreateFormData } from "./form";
-
-export interface ProductVariantCreateAttributesProps {
- attributes: ProductDetails_product_productType_variantAttributes[];
- data: ProductVariantCreateFormData;
- onAttributeClick: (id: string) => void;
-}
-
-const useStyles = makeStyles({
- checkboxCell: {
- paddingLeft: 0
- },
- wideCell: {
- width: "100%"
- }
-});
-
-const ProductVariantCreateAttributes: React.FC<
- ProductVariantCreateAttributesProps
-> = props => {
- const { attributes, data, onAttributeClick } = props;
- const classes = useStyles(props);
-
- return (
-
-
- {renderCollection(
- attributes,
- attribute => {
- if (!attribute) {
- return null;
- }
- const isChecked = !!data.attributes.find(
- selectedAttribute => selectedAttribute.id === attribute.id
- );
-
- return (
- attribute.id)}>
-
- onAttributeClick(attribute.id)}
- />
-
-
- {attribute.name}
-
-
- );
- },
- () => (
-
-
-
-
-
- )
- )}
-
-
- );
-};
-
-ProductVariantCreateAttributes.displayName = "ProductVariantCreateAttributes";
-export default ProductVariantCreateAttributes;
diff --git a/src/products/components/ProductVariantCreateDialog/ProductVariantCreateContent.tsx b/src/products/components/ProductVariantCreateDialog/ProductVariantCreateContent.tsx
index d451c1a75..ef044632a 100644
--- a/src/products/components/ProductVariantCreateDialog/ProductVariantCreateContent.tsx
+++ b/src/products/components/ProductVariantCreateDialog/ProductVariantCreateContent.tsx
@@ -5,7 +5,6 @@ import { ProductDetails_product_productType_variantAttributes } from "@saleor/pr
import { ProductVariantBulkCreate_productVariantBulkCreate_bulkProductErrors } from "@saleor/products/types/ProductVariantBulkCreate";
import { isSelected } from "@saleor/utils/lists";
import { ProductVariantCreateFormData } from "./form";
-import ProductVariantCreateAttributes from "./ProductVariantCreateAttributes";
import ProductVariantCreatePrices from "./ProductVariantCreatePrices";
import ProductVariantCreateSummary from "./ProductVariantCreateSummary";
import ProductVariantCreateTabs from "./ProductVariantCreateTabs";
@@ -54,18 +53,6 @@ const ProductVariantCreateContent: React.FC<
- {step === "attributes" && (
-
- dispatchFormDataAction({
- attributeId,
- type: "selectAttribute"
- })
- }
- />
- )}
{step === "values" && (
0;
case "values":
return data.attributes.every(attribute => attribute.values.length > 0);
case "prices":
@@ -77,6 +75,7 @@ export interface ProductVariantCreateDialogProps
ProductVariantCreateContentProps,
"data" | "dispatchFormDataAction" | "step"
> {
+ defaultPrice: string;
open: boolean;
onClose: () => void;
onSubmit: (data: ProductVariantBulkCreateInput[]) => void;
@@ -85,17 +84,19 @@ export interface ProductVariantCreateDialogProps
const ProductVariantCreateDialog: React.FC<
ProductVariantCreateDialogProps
> = props => {
- const { open, onClose, onSubmit, ...contentProps } = props;
+ const {
+ attributes,
+ defaultPrice,
+ open,
+ onClose,
+ onSubmit,
+ ...contentProps
+ } = props;
const classes = useStyles(props);
- const [step, setStep] = React.useState(
- "attributes"
- );
+ const [step, setStep] = React.useState("values");
function handleNextStep() {
switch (step) {
- case "attributes":
- setStep("values");
- break;
case "values":
setStep("prices");
break;
@@ -107,9 +108,6 @@ const ProductVariantCreateDialog: React.FC<
function handlePrevStep() {
switch (step) {
- case "values":
- setStep("attributes");
- break;
case "prices":
setStep("values");
break;
@@ -121,7 +119,16 @@ const ProductVariantCreateDialog: React.FC<
const [data, dispatchFormDataAction] = React.useReducer(
reduceProductVariantCreateFormData,
- initialForm
+ createInitialForm(attributes, defaultPrice)
+ );
+
+ React.useEffect(
+ () =>
+ dispatchFormDataAction({
+ data: createInitialForm(attributes, defaultPrice),
+ type: "reload"
+ }),
+ [attributes.length]
);
return (
@@ -135,6 +142,7 @@ const ProductVariantCreateDialog: React.FC<
- {step !== "attributes" && (
+ {step !== "values" && (