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" && (