diff --git a/src/products/components/ProductCreatePage/ProductCreatePage.tsx b/src/products/components/ProductCreatePage/ProductCreatePage.tsx index f07e91605..897a41e40 100644 --- a/src/products/components/ProductCreatePage/ProductCreatePage.tsx +++ b/src/products/components/ProductCreatePage/ProductCreatePage.tsx @@ -41,9 +41,11 @@ import ProductAttributes, { } from "../ProductAttributes"; import ProductDetailsForm from "../ProductDetailsForm"; import ProductOrganization from "../ProductOrganization"; +import ProductPricing from "../ProductPricing"; import ProductStocks, { ProductStockInput } from "../ProductStocks"; interface FormData { + basePrice: number; publicationDate: string; category: string; collections: string[]; @@ -67,6 +69,7 @@ interface ProductCreatePageProps { errors: ProductErrorFragment[]; collections: SearchCollections_search_edges_node[]; categories: SearchCategories_search_edges_node[]; + currency: string; disabled: boolean; fetchMoreCategories: FetchMoreProps; fetchMoreCollections: FetchMoreProps; @@ -88,6 +91,7 @@ interface ProductCreatePageProps { } export const ProductCreatePage: React.FC = ({ + currency, disabled, categories: categoryChoiceList, collections: collectionChoiceList, @@ -126,6 +130,7 @@ export const ProductCreatePage: React.FC = ({ convertToRaw(ContentState.createFromText("")) ); const initialData: FormData = { + basePrice: 0, category: "", chargeTaxes: false, collections: [], @@ -227,6 +232,14 @@ export const ProductCreatePage: React.FC = ({ /> )} + + {!!productType && !productType.hasVariants && ( <> ({ + root: { + display: "grid", + gridColumnGap: theme.spacing(2), + gridTemplateColumns: "1fr 1fr" + } + }), + { name: "ProductPricing" } +); + +interface ProductPricingProps { + currency?: string; + data: { + chargeTaxes: boolean; + basePrice: number; + }; + disabled: boolean; + errors: ProductErrorFragment[]; + onChange: (event: React.ChangeEvent) => void; +} + +const ProductPricing: React.FC = props => { + const { currency, data, disabled, errors, onChange } = props; + + const classes = useStyles(props); + const intl = useIntl(); + + const formErrors = getFormErrors(["basePrice"], errors); + + return ( + + + + + +
+ +
+
+
+ ); +}; +ProductPricing.displayName = "ProductPricing"; +export default ProductPricing; diff --git a/src/products/components/ProductPricing/index.ts b/src/products/components/ProductPricing/index.ts new file mode 100644 index 000000000..4a41ac8e5 --- /dev/null +++ b/src/products/components/ProductPricing/index.ts @@ -0,0 +1,2 @@ +export { default } from "./ProductPricing"; +export * from "./ProductPricing"; diff --git a/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx b/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx index a97951bb6..fb8b8d7ca 100644 --- a/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx +++ b/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx @@ -47,6 +47,7 @@ import ProductAttributes, { ProductAttributeInput } from "../ProductAttributes"; import ProductDetailsForm from "../ProductDetailsForm"; import ProductImages from "../ProductImages"; import ProductOrganization from "../ProductOrganization"; +import ProductPricing from "../ProductPricing"; import ProductStocks, { ProductStockInput } from "../ProductStocks"; import ProductVariants from "../ProductVariants"; @@ -158,6 +159,7 @@ export const ProductUpdatePage: React.FC = ({ const categories = getChoices(categoryChoiceList); const collections = getChoices(collectionChoiceList); + const currency = maybe(() => product.basePrice.currency); const hasVariants = maybe(() => product.productType.hasVariants, false); const handleSubmit = (data: ProductUpdatePageFormData) => { @@ -244,6 +246,14 @@ export const ProductUpdatePage: React.FC = ({ /> )} + + {hasVariants ? ( { const navigate = useNavigator(); const notify = useNotifier(); + const shop = useShop(); const intl = useIntl(); const { loadMore: loadMoreCategories, @@ -72,6 +74,7 @@ export const ProductCreateView: React.FC = () => { id: attribute.id, values: attribute.value })), + basePrice: decimal(formData.basePrice), category: formData.category, chargeTaxes: formData.chargeTaxes, collections: formData.collections, @@ -106,6 +109,7 @@ export const ProductCreateView: React.FC = () => { })} /> shop.defaultCurrency)} categories={maybe( () => searchCategoryOpts.data.search.edges, [] diff --git a/src/storybook/stories/products/ProductCreatePage.tsx b/src/storybook/stories/products/ProductCreatePage.tsx index e387cb31e..9aaa25526 100644 --- a/src/storybook/stories/products/ProductCreatePage.tsx +++ b/src/storybook/stories/products/ProductCreatePage.tsx @@ -17,6 +17,7 @@ storiesOf("Views / Products / Create product", module) .addDecorator(Decorator) .add("default", () => ( ( (