diff --git a/src/components/VisibilityCard/VisibilityCard.tsx b/src/components/VisibilityCard/VisibilityCard.tsx index 6bca5b70d..061d00a66 100644 --- a/src/components/VisibilityCard/VisibilityCard.tsx +++ b/src/components/VisibilityCard/VisibilityCard.tsx @@ -8,7 +8,9 @@ import { useIntl } from "react-intl"; import CardTitle from "@saleor/components/CardTitle"; import RadioSwitchField from "@saleor/components/RadioSwitchField"; +import { FormErrors } from "@saleor/types"; import { DateContext } from "../Date/DateContext"; +import FormSpacer from "../FormSpacer"; const useStyles = makeStyles( theme => ({ @@ -50,7 +52,7 @@ interface VisibilityCardProps { isPublished: boolean; publicationDate: string; }; - errors: { [key: string]: string }; + errors: FormErrors<"isPublished" | "publicationDate">; disabled?: boolean; hiddenMessage: string; onChange: (event: React.ChangeEvent) => void; @@ -99,6 +101,7 @@ export const VisibilityCard: React.FC = props => {

@@ -157,6 +160,12 @@ export const VisibilityCard: React.FC = props => { )} )} + {errors.isPublished && ( + <> + + {errors.isPublished} + + )}

{children}
diff --git a/src/products/views/ProductUpdate/ProductUpdate.tsx b/src/products/views/ProductUpdate/ProductUpdate.tsx index d1ca3dab0..cda0d29b6 100644 --- a/src/products/views/ProductUpdate/ProductUpdate.tsx +++ b/src/products/views/ProductUpdate/ProductUpdate.tsx @@ -206,10 +206,16 @@ export const ProductUpdate: React.FC = ({ id, params }) => { () => searchCollectionsOpts.data.search.edges, [] ).map(edge => edge.node); - const errors = maybe( - () => updateProduct.opts.data.productUpdate.errors, - [] - ); + const errors = [ + ...maybe( + () => updateProduct.opts.data.productUpdate.errors, + [] + ), + ...maybe( + () => updateSimpleProduct.opts.data.productUpdate.errors, + [] + ) + ]; return ( <> diff --git a/src/storybook/stories/products/ProductUpdatePage.tsx b/src/storybook/stories/products/ProductUpdatePage.tsx index 84c5b0952..a3c0b2d74 100644 --- a/src/storybook/stories/products/ProductUpdatePage.tsx +++ b/src/storybook/stories/products/ProductUpdatePage.tsx @@ -8,6 +8,8 @@ import ProductUpdatePage, { ProductUpdatePageProps } from "@saleor/products/components/ProductUpdatePage"; import { product as productFixture } from "@saleor/products/fixtures"; +import { ProductUpdatePageFormData } from "@saleor/products/utils/data"; +import { formError } from "@saleor/storybook/misc"; import Decorator from "../../Decorator"; const product = productFixture(placeholderImage); @@ -83,4 +85,23 @@ storiesOf("Views / Products / Product edit", module) attributes: [] }} /> + )) + .add("form errors", () => ( + ).map(formError)} + /> ));