diff --git a/src/products/components/ProductVariantCreatorPage/ProductVariantCreator.stories.tsx b/src/products/components/ProductVariantCreatorPage/ProductVariantCreator.stories.tsx index 2c903f43d..08986ab6c 100644 --- a/src/products/components/ProductVariantCreatorPage/ProductVariantCreator.stories.tsx +++ b/src/products/components/ProductVariantCreatorPage/ProductVariantCreator.stories.tsx @@ -109,11 +109,37 @@ storiesOf( step={ProductVariantCreatorStep.prices} /> )) + .add("apply to all when one warehouse", () => ( + + )) .add("apply to attribute", () => ( + )) + .add("apply to attribute when one warehouse", () => ( + )); storiesOf("Views / Products / Create multiple variants / summary", module) diff --git a/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorPage.tsx b/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorPage.tsx index 1e95564e1..ec1879404 100644 --- a/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorPage.tsx +++ b/src/products/components/ProductVariantCreatorPage/ProductVariantCreatorPage.tsx @@ -1,4 +1,5 @@ import Button from "@material-ui/core/Button"; +import Typography from "@material-ui/core/Typography"; import { makeStyles } from "@material-ui/core/styles"; import React from "react"; import { FormattedMessage, useIntl, IntlShape } from "react-intl"; @@ -6,6 +7,7 @@ import { FormattedMessage, useIntl, IntlShape } from "react-intl"; import useWizard from "@saleor/hooks/useWizard"; import PageHeader from "@saleor/components/PageHeader"; import Container from "@saleor/components/Container"; +import Hr from "@saleor/components/Hr"; import { ProductVariantBulkCreateInput } from "../../../types/globalTypes"; import { createInitialForm, ProductVariantCreateFormData } from "./form"; import ProductVariantCreatorContent, { @@ -26,6 +28,12 @@ const useStyles = makeStyles( overflowX: "visible", overflowY: "hidden", width: 800 + }, + description: { + marginTop: theme.spacing() + }, + hr: { + margin: theme.spacing(3, 0) } }), { name: "ProductVariantCreatePage" } @@ -94,6 +102,29 @@ function getTitle(step: ProductVariantCreatorStep, intl: IntlShape): string { } } +function getDescription( + step: ProductVariantCreatorStep, + intl: IntlShape +): string { + switch (step) { + case ProductVariantCreatorStep.values: + return intl.formatMessage({ + defaultMessage: + "Selected values will be used to create variants for the configurable product." + }); + case ProductVariantCreatorStep.prices: + return intl.formatMessage({ + defaultMessage: + "Based on your selections we will create 8 products. Use this step to customize price and stocks for your new products." + }); + case ProductVariantCreatorStep.summary: + return intl.formatMessage({ + defaultMessage: + "Here is the summary of variants that will be created. You can change prices, stocks an SKU for each one created." + }); + } +} + const ProductVariantCreatePage: React.FC = props => { const { attributes, @@ -136,12 +167,21 @@ const ProductVariantCreatePage: React.FC = props type: ProductVariantCreateReducerActionType.reload }); - React.useEffect(reloadForm, [attributes.length]); + React.useEffect(reloadForm, [attributes.length, warehouses.length]); return ( - + + {getTitle(step, intl)} + + {getDescription(step, intl)} + + + } + > {step !== ProductVariantCreatorStep.values && ( )} +
= pr )} )} + {data.stock.mode === "attribute" && !!data.stock.attribute && ( + <> + +
+ + )} `; +exports[`Storyshots Views / Products / Create multiple variants / prices and SKUs apply to all 1`] = ` +
+
+
+
+ + Price + +
+
+
+
+
+
+ +
+
+ +
+ + USD + +
+
+
+ +
+
+
+
+
+ Choose attribute +
+
+
+
+ +
+
+ Box Size +
+ + + +
+
+
+
+
+
+
+
+
+ 100g +
+
+
+
+ +
+ + USD + +
+
+
+
+
+
+
+
+
+ 500g +
+
+
+
+ +
+ + USD + +
+
+
+
+
+
+
+
+
+ + Stock and Warehousing + +
+
+
+
+
+
+ Warehouses +
+
+ Based on your selections we will create 5 products. Use this step to customize price and stocks for your new products +
+
+ + + + +
+
+
+
+
+ Stock +
+
+ +
+
+
+ C our wares +
+
+ +
+ + +
+
+
+
+
+ Be stocked +
+
+ +
+ + +
+
+
+
+
+ Darkwares +
+
+ +
+ + +
+
+
+
+
+ +
+ +
+
+
+
+
+`; + +exports[`Storyshots Views / Products / Create multiple variants / prices and SKUs apply to all when one warehouse 1`] = ` +
+
+
+
+ + Price + +
+
+
+
+
+
+ +
+
+ +
+ + USD + +
+
+
+ +
+
+
+
+
+ Choose attribute +
+
+
+
+ +
+
+ Box Size +
+ + + +
+
+
+
+
+
+
+
+
+ 100g +
+
+
+
+ +
+ + USD + +
+
+
+
+
+
+
+
+
+ 500g +
+
+
+
+ +
+ + USD + +
+
+
+
+
+
+
+
+
+ + Stock and Warehousing + +
+
+
+
+
+
+ Stock +
+
+ +
+
+
+ C our wares +
+
+ +
+ + +
+
+
+
+
+ +
+ +
+
+
+
+
+`; + +exports[`Storyshots Views / Products / Create multiple variants / prices and SKUs apply to attribute 1`] = ` +
+
+
+
+ + Price + +
+
+
+
+
+
+ +
+
+ +
+ + USD + +
+
+
+ +
+
+
+
+
+ Choose attribute +
+
+
+
+ +
+
+ Box Size +
+ + + +
+
+
+
+
+
+
+
+
+ 100g +
+
+
+
+ +
+ + USD + +
+
+
+
+
+
+
+
+
+ 500g +
+
+
+
+ +
+ + USD + +
+
+
+
+
+
+
+
+
+ + Stock and Warehousing + +
+
+
+
+
+
+ Warehouses +
+
+ Based on your selections we will create 5 products. Use this step to customize price and stocks for your new products +
+
+ + + + +
+
+
+
+
+ Stock +
+
+ +
+ +
+
+ +
+
+ Box Size +
+ + + +
+
+
+
+
+
+
+
+ C our wares +
+
+ Be stocked +
+
+ Darkwares +
+
+ 100g +
+
+ +
+ + +
+
+
+ +
+ + +
+
+
+ +
+ + +
+
+
+ 500g +
+
+ +
+ + +
+
+
+ +
+ + +
+
+
+ +
+ + +
+
+
+
+
+
+
+ +
+
+
+
+
+`; + +exports[`Storyshots Views / Products / Create multiple variants / prices and SKUs apply to attribute when one warehouse 1`] = ` +
+
+
+
+ + Price + +
+
+
+
+
+
+ +
+
+ +
+ + USD + +
+
+
+ +
+
+
+
+
+ Choose attribute +
+
+
+
+ +
+
+ Box Size +
+ + + +
+
+
+
+
+
+
+
+
+ 100g +
+
+
+
+ +
+ + USD + +
+
+
+
+
+
+
+
+
+ 500g +
+
+
+
+ +
+ + USD + +
+
+
+
+
+
+
+
+
+ + Stock and Warehousing + +
+
+
+
+
+
+ Stock +
+
+ +
+ +
+
+ +
+
+ Box Size +
+ + + +
+
+
+
+
+
+
+
+ C our wares +
+
+ 100g +
+
+ +
+ + +
+
+
+ 500g +
+
+ +
+ + +
+
+
+
+
+
+
+ +
+
+
+
+
+`; + exports[`Storyshots Views / Products / Create multiple variants / summary default 1`] = `
Arabica - - Round -
Arabica - - Polo -
Arabica - - Round -
Arabica - - Polo -
Arabica - - Round -
Arabica - - Polo -
Arabica - - Round -
Arabica - - Polo -
-
-
- - Collar - -
-
-
-
-
- - - -
-
-
`; @@ -99687,6 +102649,11 @@ exports[`Storyshots Views / Products / Create multiple variants interactive 1`] class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id" > Choose Values +
+ Selected values will be used to create variants for the configurable product. +
+
@@ -99893,148 +102863,6 @@ exports[`Storyshots Views / Products / Create multiple variants interactive 1`]
-
-
- - Brand - -
-
-
-
-
- -
-
-
-
-
- - Candy Box Size - -
-
-
-
-
- - - -
-
-
@@ -100106,98 +102934,6 @@ exports[`Storyshots Views / Products / Create multiple variants interactive 1`]
-
-
- - Collar - -
-
-
-
-
- - - -
-
-
@@ -100269,1250 +103005,6 @@ exports[`Storyshots Views / Products / Create multiple variants interactive 1`]
-
-
- - Cover - -
-
-
-
-
- - - - - - -
-
-
-
-
- - Flavor - -
-
-
-
-
- - -
-
-
-
-
- - Language - -
-
-
-
-
- - -
-
-
-
-
- - Publisher - -
-
-
-
-
- - -
-
-
-
-
- - Size - -
-
-
-
-
- - - - - - -
-
-
-
-
-`; - -exports[`Storyshots Views / Products / Create multiple variants prices and SKU 1`] = ` -
-
-
-
- - Price - -
-
-
-
-
-
- -
-
- -
- - USD - -
-
-
- -
-
-
-
-
- Choose attribute -
-
-
-
- -
-
- Box Size -
- - - -
-
-
-
-
-
-
-
-
- 100g -
-
-
-
- -
- - USD - -
-
-
-
-
-
-
-
-
- 500g -
-
-
-
- -
- - USD - -
-
-
-
-
-
-
-
-
- - Stock - -
-
-
-
-
-
- -
-
- -
- - -
-
-
- -
-
-
-
-
- Choose attribute -
-
-
-
- -
-
- Box Size -
- - - -
-
-
-
-
-
-
-
-
- 100g -
-
-
-
- -
- - -
-
-
-
-
-
-
-
-
- 500g -
-
-
-
- -
- - -
-
-
-
-
-
`;