diff --git a/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx b/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx index 8304a8953..b65368c00 100644 --- a/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx +++ b/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx @@ -14,6 +14,10 @@ import ConfirmButton, { import ControlledCheckbox from "@saleor/components/ControlledCheckbox"; import Form from "@saleor/components/Form"; import { buttonMessages } from "@saleor/intl"; +import { OrderErrorFragment } from "@saleor/orders/types/OrderErrorFragment"; +import FormSpacer from "@saleor/components/FormSpacer"; +import getOrderErrorMessage from "@saleor/utils/errors/order"; +import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors"; export interface FormData { restock: boolean; @@ -32,8 +36,9 @@ const useStyles = makeStyles( { name: "OrderCancelDialog" } ); -interface OrderCancelDialogProps { +export interface OrderCancelDialogProps { confirmButtonState: ConfirmButtonTransitionState; + errors: OrderErrorFragment[]; number: string; open: boolean; onClose?(); @@ -43,14 +48,16 @@ interface OrderCancelDialogProps { const OrderCancelDialog: React.FC = props => { const { confirmButtonState, + errors: apiErrors, number: orderNumber, open, onSubmit, onClose } = props; - const classes = useStyles(props); + const classes = useStyles(props); const intl = useIntl(); + const errors = useModalDialogErrors(apiErrors, open); return ( @@ -87,6 +94,16 @@ const OrderCancelDialog: React.FC = props => { onChange={change} /> + {errors.length > 0 && ( + <> + + {errors.map(err => ( + + {getOrderErrorMessage(err, intl)} + + ))} + + )} - - - - - -); +}) => { + const intl = useIntl(); + + return ( + + + + + + + + + {errors.length > 0 && ( + <> + + {errors.map(err => ( + + {getOrderErrorMessage(err, intl)} + + ))} + + )} + + + + + + + + + ); +}; OrderPaymentVoidDialog.displayName = "OrderPaymentVoidDialog"; export default OrderPaymentVoidDialog; diff --git a/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx b/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx index 14a4f77b0..69f097112 100644 --- a/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx +++ b/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx @@ -3,6 +3,7 @@ import CircularProgress from "@material-ui/core/CircularProgress"; import Dialog from "@material-ui/core/Dialog"; import DialogActions from "@material-ui/core/DialogActions"; import DialogContent from "@material-ui/core/DialogContent"; +import DialogContentText from "@material-ui/core/DialogContentText"; import DialogTitle from "@material-ui/core/DialogTitle"; import { makeStyles } from "@material-ui/core/styles"; import TableBody from "@material-ui/core/TableBody"; @@ -24,6 +25,10 @@ import useSearchQuery from "@saleor/hooks/useSearchQuery"; import { buttonMessages } from "@saleor/intl"; import { maybe, renderCollection } from "@saleor/misc"; import { FetchMoreProps } from "@saleor/types"; +import { OrderErrorFragment } from "@saleor/orders/types/OrderErrorFragment"; +import getOrderErrorMessage from "@saleor/utils/errors/order"; +import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors"; +import FormSpacer from "@saleor/components/FormSpacer"; import { SearchOrderVariant_search_edges_node, SearchOrderVariant_search_edges_node_variants @@ -50,7 +55,8 @@ const useStyles = makeStyles( alignItems: "center", display: "flex", height: theme.spacing(3), - justifyContent: "center" + justifyContent: "center", + marginTop: theme.spacing(3) }, overflow: { overflowY: "visible" @@ -79,8 +85,9 @@ type SetVariantsAction = ( data: SearchOrderVariant_search_edges_node_variants[] ) => void; -interface OrderProductAddDialogProps extends FetchMoreProps { +export interface OrderProductAddDialogProps extends FetchMoreProps { confirmButtonState: ConfirmButtonTransitionState; + errors: OrderErrorFragment[]; open: boolean; products: SearchOrderVariant_search_edges_node[]; onClose: () => void; @@ -154,6 +161,7 @@ const onVariantAdd = ( const OrderProductAddDialog: React.FC = props => { const { confirmButtonState, + errors: apiErrors, open, loading, hasMore, @@ -163,13 +171,14 @@ const OrderProductAddDialog: React.FC = props => { onClose, onSubmit } = props; - const classes = useStyles(props); + const classes = useStyles(props); const intl = useIntl(); const [query, onQueryChange] = useSearchQuery(onFetch); const [variants, setVariants] = React.useState< SearchOrderVariant_search_edges_node_variants[] >([]); + const errors = useModalDialogErrors(apiErrors, open); const selectedVariantsToProductsMap = products ? products.map(product => @@ -323,6 +332,16 @@ const OrderProductAddDialog: React.FC = props => { + {errors.length > 0 && ( + <> + + {errors.map(err => ( + + {getOrderErrorMessage(err, intl)} + + ))} + + )}