djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Display order errors

Browse source
This commit is contained in:
dominik-zeglen 2020-03-16 13:28:52 +01:00
parent f43326b660
commit b4d16517b0
26 changed files with 888 additions and 416 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx
View file

@ -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<OrderCancelDialogProps> = 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 (
<Dialog onClose={onClose} open={open}>
@ -87,6 +94,16 @@ const OrderCancelDialog: React.FC<OrderCancelDialogProps> = props => {
onChange={change}
/>
</DialogContentText>
{errors.length > 0 && (
<>
<FormSpacer />
{errors.map(err => (
<DialogContentText color="error">
{getOrderErrorMessage(err, intl)}
</DialogContentText>
))}
</>
)}
</DialogContent>
<DialogActions>
<Button onClick={onClose}>

17
src/orders/components/OrderDraftCancelDialog/OrderDraftCancelDialog.tsx
View file

@ -4,9 +4,14 @@ import { FormattedMessage, useIntl } from "react-intl";
import ActionDialog from "@saleor/components/ActionDialog";
import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
import { OrderErrorFragment } from "@saleor/orders/types/OrderErrorFragment";
import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
import FormSpacer from "@saleor/components/FormSpacer";
import getOrderErrorMessage from "@saleor/utils/errors/order";
export interface OrderDraftCancelDialogProps {
confirmButtonState: ConfirmButtonTransitionState;
errors: OrderErrorFragment[];
open: boolean;
onClose: () => void;
onConfirm: () => void;
@ -15,12 +20,14 @@ export interface OrderDraftCancelDialogProps {
const OrderDraftCancelDialog: React.FC<OrderDraftCancelDialogProps> = ({
confirmButtonState,
errors: apiErrors,
onClose,
onConfirm,
open,
orderNumber
}) => {
const intl = useIntl();
const errors = useModalDialogErrors(apiErrors, open);
return (
<ActionDialog
@ -42,6 +49,16 @@ const OrderDraftCancelDialog: React.FC<OrderDraftCancelDialogProps> = ({
}}
/>
</DialogContentText>
{errors.length > 0 && (
<>
<FormSpacer />
{errors.map(err => (
<DialogContentText color="error">
{getOrderErrorMessage(err, intl)}
</DialogContentText>
))}
</>
)}
</ActionDialog>
);
};

18
src/orders/components/OrderDraftFinalizeDialog/OrderDraftFinalizeDialog.tsx
View file

@ -4,6 +4,10 @@ import { FormattedMessage, IntlShape, useIntl } from "react-intl";
import ActionDialog from "@saleor/components/ActionDialog";
import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
import { OrderErrorFragment } from "@saleor/orders/types/OrderErrorFragment";
import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
import FormSpacer from "@saleor/components/FormSpacer";
import getOrderErrorMessage from "@saleor/utils/errors/order";
export enum OrderDraftFinalizeWarning {
NO_SHIPPING,
@ -15,6 +19,7 @@ export enum OrderDraftFinalizeWarning {
export interface OrderDraftFinalizeDialogProps {
confirmButtonState: ConfirmButtonTransitionState;
errors: OrderErrorFragment[];
open: boolean;
orderNumber: string;
warnings: OrderDraftFinalizeWarning[];
@ -48,6 +53,7 @@ function translateWarnings(
const OrderDraftFinalizeDialog: React.FC<OrderDraftFinalizeDialogProps> = ({
confirmButtonState,
errors: apiErrors,
open,
warnings,
onClose,
@ -55,6 +61,8 @@ const OrderDraftFinalizeDialog: React.FC<OrderDraftFinalizeDialogProps> = ({
orderNumber
}) => {
const intl = useIntl();
const errors = useModalDialogErrors(apiErrors, open);
const translatedWarnings = translateWarnings(intl);
return (
@ -99,6 +107,16 @@ const OrderDraftFinalizeDialog: React.FC<OrderDraftFinalizeDialogProps> = ({
orderNumber
}}
/>
{errors.length > 0 && (
<>
<FormSpacer />
{errors.map(err => (
<DialogContentText color="error">
{getOrderErrorMessage(err, intl)}
</DialogContentText>
))}
</>
)}
</DialogContentText>
</ActionDialog>
);

30
src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx
View file

@ -14,6 +14,9 @@ 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";
export interface FormData {
restock: boolean;
@ -32,29 +35,22 @@ const useStyles = makeStyles(
{ name: "OrderFulfillmentCancelDialog" }
);
interface OrderFulfillmentCancelDialogProps {
export interface OrderFulfillmentCancelDialogProps {
confirmButtonState: ConfirmButtonTransitionState;
errors: OrderErrorFragment[];
open: boolean;
onClose();
onConfirm(data: FormData);
}
const OrderFulfillmentCancelDialog: React.FC<
OrderFulfillmentCancelDialogProps
> = props => {
const {
confirmButtonState,
const OrderFulfillmentCancelDialog: React.FC<OrderFulfillmentCancelDialogProps> = props => {
const { confirmButtonState, errors, open, onConfirm, onClose } = props;
open,
onConfirm,
onClose
} = props;
const classes = useStyles(props);
const intl = useIntl();
return (
<Dialog onClose={onClose} open={open}>
<Dialog onClose={onClose} open={open} fullWidth maxWidth="xs">
<Form initial={{ restock: true }} onSubmit={onConfirm}>
{({ change, data, submit }) => (
<>
@ -77,6 +73,16 @@ const OrderFulfillmentCancelDialog: React.FC<
name="restock"
onChange={change}
/>
{errors.length > 0 && (
<>
<FormSpacer />
{errors.map(err => (
<DialogContentText color="error">
{getOrderErrorMessage(err, intl)}
</DialogContentText>
))}
</>
)}
</DialogContent>
<DialogActions>
<Button onClick={onClose}>

34
src/orders/components/OrderFulfillmentDialog/OrderFulfillmentDialog.tsx
View file

@ -2,6 +2,7 @@ import Button from "@material-ui/core/Button";
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";
@ -22,8 +23,11 @@ import TableCellAvatar, {
AVATAR_MARGIN
} from "@saleor/components/TableCellAvatar";
import { buttonMessages } from "@saleor/intl";
import { maybe } from "../../../misc";
import { OrderErrorFragment } from "@saleor/orders/types/OrderErrorFragment";
import { getFormErrors } from "@saleor/utils/errors";
import getOrderErrorMessage from "@saleor/utils/errors/order";
import { OrderDetails_order_lines } from "../../types/OrderDetails";
import { maybe } from "../../../misc";
export interface FormData {
lines: number[];
@ -65,6 +69,7 @@ const useStyles = makeStyles(
export interface OrderFulfillmentDialogProps {
confirmButtonState: ConfirmButtonTransitionState;
errors: OrderErrorFragment[];
open: boolean;
lines: OrderDetails_order_lines[];
onClose();
@ -72,11 +77,14 @@ export interface OrderFulfillmentDialogProps {
}
const OrderFulfillmentDialog: React.FC<OrderFulfillmentDialogProps> = props => {
const { confirmButtonState, open, lines, onClose, onSubmit } = props;
const { confirmButtonState, errors, open, lines, onClose, onSubmit } = props;
const classes = useStyles(props);
const intl = useIntl();
const formFields = ["trackingNumber"];
const formErrors = getFormErrors(formFields, errors);
return (
<Dialog onClose={onClose} open={open}>
<Form
@ -165,8 +173,13 @@ const OrderFulfillmentDialog: React.FC<OrderFulfillmentDialogProps> = props => {
handleQuantityChange(productIndex, event)
}
error={
!!formErrors.trackingNumber ||
remainingQuantity < data.lines[productIndex]
}
helperText={getOrderErrorMessage(
formErrors.trackingNumber,
intl
)}
/>
<div className={classes.remainingQuantity}>
/ {remainingQuantity}
@ -181,7 +194,12 @@ const OrderFulfillmentDialog: React.FC<OrderFulfillmentDialogProps> = props => {
<DialogContent>
<FormSpacer />
<TextField
error={!!formErrors.trackingNumber}
fullWidth
helperText={getOrderErrorMessage(
formErrors.trackingNumber,
intl
)}
label={intl.formatMessage({
defaultMessage: "Tracking number",
description: "fulfillment group"
@ -190,6 +208,18 @@ const OrderFulfillmentDialog: React.FC<OrderFulfillmentDialogProps> = props => {
value={data.trackingNumber}
onChange={change}
/>
{errors.length > 0 && (
<>
<FormSpacer />
{errors
.filter(err => !formFields.includes(err.field))
.map(err => (
<DialogContentText color="error">
{getOrderErrorMessage(err, intl)}
</DialogContentText>
))}
</>
)}
</DialogContent>
<DialogActions>
<Button onClick={onClose}>

43
src/orders/components/OrderFulfillmentTrackingDialog/OrderFulfillmentTrackingDialog.tsx
View file

@ -2,6 +2,7 @@ import Button from "@material-ui/core/Button";
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 TextField from "@material-ui/core/TextField";
import React from "react";
@ -12,26 +13,41 @@ import ConfirmButton, {
} from "@saleor/components/ConfirmButton";
import Form from "@saleor/components/Form";
import { buttonMessages } from "@saleor/intl";
import { OrderErrorFragment } from "@saleor/orders/types/OrderErrorFragment";
import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
import getOrderErrorMessage from "@saleor/utils/errors/order";
import { getFormErrors } from "@saleor/utils/errors";
import FormSpacer from "@saleor/components/FormSpacer";
export interface FormData {
trackingNumber: string;
}
interface OrderFulfillmentTrackingDialogProps {
export interface OrderFulfillmentTrackingDialogProps {
confirmButtonState: ConfirmButtonTransitionState;
errors: OrderErrorFragment[];
open: boolean;
trackingNumber: string;
onClose();
onConfirm(data: FormData);
}
const OrderFulfillmentTrackingDialog: React.FC<
OrderFulfillmentTrackingDialogProps
> = ({ confirmButtonState, open, trackingNumber, onConfirm, onClose }) => {
const OrderFulfillmentTrackingDialog: React.FC<OrderFulfillmentTrackingDialogProps> = ({
confirmButtonState,
errors: apiErrors,
open,
trackingNumber,
onConfirm,
onClose
}) => {
const intl = useIntl();
const errors = useModalDialogErrors(apiErrors, open);
const formFields = ["trackingNumber"];
const formErrors = getFormErrors(formFields, errors);
return (
<Dialog onClose={onClose} open={open}>
<Dialog onClose={onClose} open={open} fullWidth maxWidth="xs">
<Form initial={{ trackingNumber }} onSubmit={onConfirm}>
{({ change, data, submit }) => (
<>
@ -43,6 +59,11 @@ const OrderFulfillmentTrackingDialog: React.FC<
</DialogTitle>
<DialogContent>
<TextField
error={!!formErrors.trackingNumber}
helperText={getOrderErrorMessage(
formErrors.trackingNumber,
intl
)}
label={intl.formatMessage({
defaultMessage: "Tracking number"
})}
@ -51,6 +72,18 @@ const OrderFulfillmentTrackingDialog: React.FC<
value={data.trackingNumber}
fullWidth
/>
{errors.length > 0 && (
<>
<FormSpacer />
{errors
.filter(err => !formFields.includes(err.field))
.map(err => (
<DialogContentText color="error">
{getOrderErrorMessage(err, intl)}
</DialogContentText>
))}
</>
)}
</DialogContent>
<DialogActions>
<Button onClick={onClose}>

17
src/orders/components/OrderMarkAsPaidDialog/OrderMarkAsPaidDialog.tsx
View file

@ -4,9 +4,14 @@ import { FormattedMessage, useIntl } from "react-intl";
import ActionDialog from "@saleor/components/ActionDialog";
import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
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 OrderMarkAsPaidDialogProps {
confirmButtonState: ConfirmButtonTransitionState;
errors: OrderErrorFragment[];
open: boolean;
onClose: () => void;
onConfirm: () => void;
@ -14,11 +19,13 @@ export interface OrderMarkAsPaidDialogProps {
const OrderMarkAsPaidDialog: React.FC<OrderMarkAsPaidDialogProps> = ({
confirmButtonState,
errors: apiErrors,
onClose,
onConfirm,
open
}) => {
const intl = useIntl();
const errors = useModalDialogErrors(apiErrors, open);
return (
<ActionDialog
@ -34,6 +41,16 @@ const OrderMarkAsPaidDialog: React.FC<OrderMarkAsPaidDialogProps> = ({
<DialogContentText>
<FormattedMessage defaultMessage="Are you sure you want to mark this order as paid?" />
</DialogContentText>
{errors.length > 0 && (
<>
<FormSpacer />
{errors.map(err => (
<DialogContentText color="error">
{getOrderErrorMessage(err, intl)}
</DialogContentText>
))}
</>
)}
</ActionDialog>
);
};

41
src/orders/components/OrderPaymentDialog/OrderPaymentDialog.tsx
View file

@ -2,6 +2,7 @@ import Button from "@material-ui/core/Button";
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 TextField from "@material-ui/core/TextField";
import React from "react";
@ -12,22 +13,28 @@ import ConfirmButton, {
} from "@saleor/components/ConfirmButton";
import Form from "@saleor/components/Form";
import { buttonMessages } from "@saleor/intl";
import { OrderErrorFragment } from "@saleor/orders/types/OrderErrorFragment";
import getOrderErrorMessage from "@saleor/utils/errors/order";
import { getFormErrors } from "@saleor/utils/errors";
import FormSpacer from "@saleor/components/FormSpacer";
export interface FormData {
amount: number;
}
interface OrderPaymentDialogProps {
export interface OrderPaymentDialogProps {
confirmButtonState: ConfirmButtonTransitionState;
errors: OrderErrorFragment[];
open: boolean;
initial: number;
variant: string;
variant: "capture" | "refund";
onClose: () => void;
onSubmit: (data: FormData) => void;
}
const OrderPaymentDialog: React.FC<OrderPaymentDialogProps> = ({
confirmButtonState,
errors,
open,
initial,
variant,
@ -36,16 +43,16 @@ const OrderPaymentDialog: React.FC<OrderPaymentDialogProps> = ({
}) => {
const intl = useIntl();
const formFields = ["payment"];
const formErrors = getFormErrors(formFields, errors);
return (
<Dialog onClose={onClose} open={open}>
<Dialog onClose={onClose} open={open} fullWidth maxWidth="xs">
<Form
initial={{
amount: initial
}}
onSubmit={data => {
onSubmit(data);
onClose();
}}
onSubmit={onSubmit}
>
{({ data, change, submit }) => (
<>
@ -60,10 +67,11 @@ const OrderPaymentDialog: React.FC<OrderPaymentDialogProps> = ({
description: "dialog header"
})}
</DialogTitle>
<DialogContent>
<TextField
error={!!formErrors.payment}
fullWidth
helperText={getOrderErrorMessage(formErrors.payment, intl)}
label={intl.formatMessage({
defaultMessage: "Amount",
description: "amount of refunded money"
@ -76,6 +84,18 @@ const OrderPaymentDialog: React.FC<OrderPaymentDialogProps> = ({
type="number"
value={data.amount}
/>
{errors.length > 0 && (
<>
<FormSpacer />
{errors
.filter(err => !formFields.includes(err.field))
.map(err => (
<DialogContentText color="error">
{getOrderErrorMessage(err, intl)}
</DialogContentText>
))}
</>
)}
</DialogContent>
<DialogActions>
<Button onClick={onClose}>
@ -85,10 +105,7 @@ const OrderPaymentDialog: React.FC<OrderPaymentDialogProps> = ({
transitionState={confirmButtonState}
color="primary"
variant="contained"
onClick={() => {
onClose();
submit();
}}
onClick={submit}
>
<FormattedMessage {...buttonMessages.confirm} />
</ConfirmButton>

79
src/orders/components/OrderPaymentVoidDialog/OrderPaymentVoidDialog.tsx
View file

@ -5,15 +5,19 @@ import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";
import React from "react";
import { FormattedMessage } from "react-intl";
import { FormattedMessage, useIntl } from "react-intl";
import ConfirmButton, {
ConfirmButtonTransitionState
} from "@saleor/components/ConfirmButton";
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";
interface OrderPaymentVoidDialogProps {
export interface OrderPaymentVoidDialogProps {
confirmButtonState: ConfirmButtonTransitionState;
errors: OrderErrorFragment[];
open: boolean;
onClose?();
onConfirm?();
@ -21,36 +25,51 @@ interface OrderPaymentVoidDialogProps {
const OrderPaymentVoidDialog: React.FC<OrderPaymentVoidDialogProps> = ({
confirmButtonState,
errors,
open,
onConfirm,
onClose
}) => (
<Dialog onClose={onClose} open={open}>
<DialogTitle>
<FormattedMessage
defaultMessage="Void Payment"
description="dialog header"
/>
</DialogTitle>
<DialogContent>
<DialogContentText>
<FormattedMessage defaultMessage="Are you sure you want to void this payment?" />
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={onClose}>
<FormattedMessage {...buttonMessages.back} />
</Button>
<ConfirmButton
transitionState={confirmButtonState}
color="primary"
variant="contained"
onClick={onConfirm}
>
<FormattedMessage {...buttonMessages.confirm} />
</ConfirmButton>
</DialogActions>
</Dialog>
);
}) => {
const intl = useIntl();
return (
<Dialog onClose={onClose} open={open}>
<DialogTitle>
<FormattedMessage
defaultMessage="Void Payment"
description="dialog header"
/>
</DialogTitle>
<DialogContent>
<DialogContentText>
<FormattedMessage defaultMessage="Are you sure you want to void this payment?" />
</DialogContentText>
{errors.length > 0 && (
<>
<FormSpacer />
{errors.map(err => (
<DialogContentText color="error">
{getOrderErrorMessage(err, intl)}
</DialogContentText>
))}
</>
)}
</DialogContent>
<DialogActions>
<Button onClick={onClose}>
<FormattedMessage {...buttonMessages.back} />
</Button>
<ConfirmButton
transitionState={confirmButtonState}
color="primary"
variant="contained"
onClick={onConfirm}
>
<FormattedMessage {...buttonMessages.confirm} />
</ConfirmButton>
</DialogActions>
</Dialog>
);
};
OrderPaymentVoidDialog.displayName = "OrderPaymentVoidDialog";
export default OrderPaymentVoidDialog;

25
src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx
View file

@ -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<OrderProductAddDialogProps> = props => {
const {
confirmButtonState,
errors: apiErrors,
open,
loading,
hasMore,
@ -163,13 +171,14 @@ const OrderProductAddDialog: React.FC<OrderProductAddDialogProps> = 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<OrderProductAddDialogProps> = props => {
</TableBody>
</ResponsiveTable>
</InfiniteScroll>
{errors.length > 0 && (
<>
<FormSpacer />
{errors.map(err => (
<DialogContentText color="error">
{getOrderErrorMessage(err, intl)}
</DialogContentText>
))}
</>
)}
</DialogContent>
<DialogActions>
<Button onClick={onClose}>

35
src/orders/components/OrderShippingMethodEditDialog/OrderShippingMethodEditDialog.tsx
View file

@ -2,10 +2,11 @@ import Button from "@material-ui/core/Button";
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 React from "react";
import { FormattedMessage } from "react-intl";
import { FormattedMessage, useIntl } from "react-intl";
import ConfirmButton, {
ConfirmButtonTransitionState
@ -14,6 +15,11 @@ import Form from "@saleor/components/Form";
import Money from "@saleor/components/Money";
import { SingleSelectField } from "@saleor/components/SingleSelectField";
import { buttonMessages } from "@saleor/intl";
import { OrderErrorFragment } from "@saleor/orders/types/OrderErrorFragment";
import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
import { getFormErrors } from "@saleor/utils/errors";
import getOrderErrorMessage from "@saleor/utils/errors/order";
import FormSpacer from "@saleor/components/FormSpacer";
import { OrderDetails_order_availableShippingMethods } from "../../types/OrderDetails";
export interface FormData {
@ -45,8 +51,9 @@ const useStyles = makeStyles(
{ name: "OrderShippingMethodEditDialog" }
);
interface OrderShippingMethodEditDialogProps {
export interface OrderShippingMethodEditDialogProps {
confirmButtonState: ConfirmButtonTransitionState;
errors: OrderErrorFragment[];
open: boolean;
shippingMethod: string;
shippingMethods?: OrderDetails_order_availableShippingMethods[];
@ -54,11 +61,10 @@ interface OrderShippingMethodEditDialogProps {
onSubmit?(data: FormData);
}
const OrderShippingMethodEditDialog: React.FC<
OrderShippingMethodEditDialogProps
> = props => {
const OrderShippingMethodEditDialog: React.FC<OrderShippingMethodEditDialogProps> = props => {
const {
confirmButtonState,
errors: apiErrors,
open,
shippingMethod,
shippingMethods,
@ -66,6 +72,12 @@ const OrderShippingMethodEditDialog: React.FC<
onSubmit
} = props;
const classes = useStyles(props);
const errors = useModalDialogErrors(apiErrors, open);
const intl = useIntl();
const formFields = ["shippingMethod"];
const formErrors = getFormErrors(formFields, errors);
const nonFieldErrors = errors.filter(err => !formFields.includes(err.field));
const choices = shippingMethods
? shippingMethods.map(s => ({
@ -84,6 +96,7 @@ const OrderShippingMethodEditDialog: React.FC<
const initialForm: FormData = {
shippingMethod
};
return (
<Dialog onClose={onClose} open={open} classes={{ paper: classes.dialog }}>
<DialogTitle>
@ -98,10 +111,22 @@ const OrderShippingMethodEditDialog: React.FC<
<DialogContent className={classes.root}>
<SingleSelectField
choices={choices}
error={!!formErrors.shippingMethod}
hint={getOrderErrorMessage(formErrors.shippingMethod, intl)}
name="shippingMethod"
value={data.shippingMethod}
onChange={change}
/>
{nonFieldErrors.length > 0 && (
<>
<FormSpacer />
{nonFieldErrors.map(err => (
<DialogContentText color="error">
{getOrderErrorMessage(err, intl)}
</DialogContentText>
))}
</>
)}
</DialogContent>
<DialogActions>
<Button onClick={onClose}>

211
src/orders/views/OrderDetails/OrderDetailsMessages.tsx
View file

@ -3,7 +3,7 @@ import { useIntl } from "react-intl";
import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier";
import { maybe } from "../../../misc";
import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
import { OrderAddNote } from "../../types/OrderAddNote";
import { OrderCancel } from "../../types/OrderCancel";
import { OrderCapture } from "../../types/OrderCapture";
@ -21,7 +21,7 @@ import { OrderRefund } from "../../types/OrderRefund";
import { OrderShippingMethodUpdate } from "../../types/OrderShippingMethodUpdate";
import { OrderUpdate } from "../../types/OrderUpdate";
import { OrderVoid } from "../../types/OrderVoid";
import { orderListUrl, orderUrl } from "../../urls";
import { orderUrl, OrderUrlQueryParams } from "../../urls";
interface OrderDetailsMessages {
children: (props: {
@ -45,260 +45,207 @@ interface OrderDetailsMessages {
handleShippingMethodUpdate: (data: OrderShippingMethodUpdate) => void;
handleUpdate: (data: OrderUpdate) => void;
}) => React.ReactElement;
id: string;
params: OrderUrlQueryParams;
}
export const OrderDetailsMessages: React.FC<OrderDetailsMessages> = ({
children
children,
id,
params
}) => {
const navigate = useNavigator();
const pushMessage = useNotifier();
const intl = useIntl();
const [, closeModal] = createDialogActionHandlers(
navigate,
params => orderUrl(id, params),
params
);
const handlePaymentCapture = (data: OrderCapture) => {
if (!maybe(() => data.orderCapture.errors.length)) {
const errs = data.orderCapture?.errors;
if (errs.length === 0) {
pushMessage({
text: intl.formatMessage({
defaultMessage: "Payment successfully captured"
})
});
} else {
pushMessage({
text: intl.formatMessage(
{
defaultMessage: "Payment not captured: {errorMessage}"
},
{
errorMessage: data.orderCapture.errors.find(
error => error.field === "payment"
).message
}
)
});
closeModal();
}
};
const handlePaymentRefund = (data: OrderRefund) => {
if (!maybe(() => data.orderRefund.errors.length)) {
const errs = data.orderRefund?.errors;
if (errs.length === 0) {
pushMessage({
text: intl.formatMessage({
defaultMessage: "Payment successfully refunded"
})
});
} else {
pushMessage({
text: intl.formatMessage(
{
defaultMessage: "Payment not refunded: {errorMessage}",
description: "notification"
},
{
errorMessage: data.orderRefund.errors.find(
error => error.field === "payment"
).message
}
)
});
closeModal();
}
};
const handleOrderFulfillmentCreate = (data: OrderCreateFulfillment) => {
if (!maybe(() => data.orderFulfillmentCreate.errors.length)) {
const errs = data.orderFulfillmentCreate?.errors;
if (errs.length === 0) {
pushMessage({
text: intl.formatMessage({
defaultMessage: "Items successfully fulfilled"
})
});
navigate(orderUrl(data.orderFulfillmentCreate.order.id), true);
} else {
pushMessage({
text: intl.formatMessage({
defaultMessage: "Could not fulfill items"
})
});
closeModal();
}
};
const handleOrderMarkAsPaid = (data: OrderMarkAsPaid) => {
if (!maybe(() => data.orderMarkAsPaid.errors.length)) {
const errs = data.orderMarkAsPaid?.errors;
if (errs.length === 0) {
pushMessage({
text: intl.formatMessage({
defaultMessage: "Order marked as paid"
})
});
navigate(orderUrl(data.orderMarkAsPaid.order.id), true);
} else {
pushMessage({
text: intl.formatMessage({
defaultMessage: "Could not mark order as paid"
})
});
closeModal();
}
};
const handleOrderCancel = (data: OrderCancel) => {
pushMessage({
text: intl.formatMessage({
defaultMessage: "Order successfully cancelled"
})
});
navigate(orderUrl(data.orderCancel.order.id), true);
const errs = data.orderCancel?.errors;
if (errs.length === 0) {
pushMessage({
text: intl.formatMessage({
defaultMessage: "Order successfully cancelled"
})
});
closeModal();
}
};
const handleDraftCancel = () => {
pushMessage({
text: intl.formatMessage({
defaultMessage: "Order successfully cancelled"
})
});
navigate(orderListUrl(), true);
const handleDraftCancel = (data: OrderDraftCancel) => {
const errs = data.draftOrderDelete?.errors;
if (errs.length === 0) {
pushMessage({
text: intl.formatMessage({
defaultMessage: "Order successfully cancelled"
})
});
closeModal();
}
};
const handleOrderVoid = () => {
pushMessage({
text: intl.formatMessage({
defaultMessage: "Order payment successfully voided"
})
});
const handleOrderVoid = (data: OrderVoid) => {
const errs = data.orderVoid?.errors;
if (errs.length === 0) {
pushMessage({
text: intl.formatMessage({
defaultMessage: "Order payment successfully voided"
})
});
closeModal();
}
};
const handleNoteAdd = (data: OrderAddNote) => {
if (!maybe(() => data.orderAddNote.errors.length)) {
const errs = data.orderAddNote?.errors;
if (errs.length === 0) {
pushMessage({
text: intl.formatMessage({
defaultMessage: "Note successfully added"
})
});
} else {
pushMessage({
text: intl.formatMessage({
defaultMessage: "Could not add note"
})
});
}
};
const handleUpdate = (data: OrderUpdate) => {
if (!maybe(() => data.orderUpdate.errors.length)) {
const errs = data.orderUpdate?.errors;
if (errs.length === 0) {
pushMessage({
text: intl.formatMessage({
defaultMessage: "Order successfully updated"
})
});
navigate(orderUrl(data.orderUpdate.order.id), true);
}
};
const handleDraftUpdate = (data: OrderDraftUpdate) => {
if (!maybe(() => data.draftOrderUpdate.errors.length)) {
const errs = data.draftOrderUpdate?.errors;
if (errs.length === 0) {
pushMessage({
text: intl.formatMessage({
defaultMessage: "Order successfully updated"
})
});
navigate(orderUrl(data.draftOrderUpdate.order.id), true);
}
};
const handleShippingMethodUpdate = (data: OrderShippingMethodUpdate) => {
if (!maybe(() => data.orderUpdateShipping.errors.length)) {
const errs = data.orderUpdateShipping?.errors;
if (errs.length === 0) {
pushMessage({
text: intl.formatMessage({
defaultMessage: "Shipping method successfully updated"
})
});
} else {
pushMessage({
text: intl.formatMessage({
defaultMessage: "Could not update shipping method"
})
});
closeModal();
}
navigate(orderUrl(data.orderUpdateShipping.order.id), true);
};
const handleOrderLineDelete = (data: OrderLineDelete) => {
if (!maybe(() => data.draftOrderLineDelete.errors.length)) {
const errs = data.draftOrderLineDelete?.errors;
if (errs.length === 0) {
pushMessage({
text: intl.formatMessage({
defaultMessage: "Order line deleted"
})
});
} else {
pushMessage({
text: intl.formatMessage({
defaultMessage: "Could not delete order line"
})
});
}
};
const handleOrderLinesAdd = (data: OrderLinesAdd) => {
if (!maybe(() => data.draftOrderLinesCreate.errors.length)) {
const errs = data.draftOrderLinesCreate?.errors;
if (errs.length === 0) {
pushMessage({
text: intl.formatMessage({
defaultMessage: "Order line added"
})
});
navigate(orderUrl(data.draftOrderLinesCreate.order.id), true);
} else {
pushMessage({
text: intl.formatMessage({
defaultMessage: "Could not create order line"
})
});
closeModal();
}
};
const handleOrderLineUpdate = (data: OrderLineUpdate) => {
if (!maybe(() => data.draftOrderLineUpdate.errors.length)) {
const errs = data.draftOrderLineUpdate?.errors;
if (errs.length === 0) {
pushMessage({
text: intl.formatMessage({
defaultMessage: "Order line updated"
})
});
} else {
pushMessage({
text: intl.formatMessage({
defaultMessage: "Could not update order line"
})
});
}
};
const handleOrderFulfillmentCancel = (data: OrderFulfillmentCancel) => {
if (!maybe(() => data.orderFulfillmentCancel.errors.length)) {
const errs = data.orderFulfillmentCancel?.errors;
if (errs.length === 0) {
pushMessage({
text: intl.formatMessage({
defaultMessage: "Fulfillment successfully cancelled"
})
});
navigate(orderUrl(data.orderFulfillmentCancel.order.id), true);
} else {
pushMessage({
text: intl.formatMessage({
defaultMessage: "Could not cancel fulfillment"
})
});
closeModal();
}
};
const handleOrderFulfillmentUpdate = (
data: OrderFulfillmentUpdateTracking
) => {
if (!maybe(() => data.orderFulfillmentUpdateTracking.errors.length)) {
const errs = data.orderFulfillmentUpdateTracking?.errors;
if (errs.length === 0) {
pushMessage({
text: intl.formatMessage({
defaultMessage: "Fulfillment successfully updated"
})
});
navigate(orderUrl(data.orderFulfillmentUpdateTracking.order.id), true);
} else {
pushMessage({
text: intl.formatMessage({
defaultMessage: "Could not update fulfillment"
})
});
closeModal();
}
};
const handleDraftFinalize = (data: OrderDraftFinalize) => {
if (!maybe(() => data.draftOrderComplete.errors.length)) {
const errs = data.draftOrderComplete?.errors;
if (errs.length === 0) {
pushMessage({
text: intl.formatMessage({
defaultMessage: "Draft order successfully finalized"
})
});
navigate(orderUrl(data.draftOrderComplete.order.id), true);
} else {
pushMessage({
text: intl.formatMessage({
defaultMessage: "Could not finalize draft"
})
});
closeModal();
}
};

282
src/orders/views/OrderDetails/index.tsx
View file

@ -1,3 +1,4 @@
import { useIntl } from "react-intl";
import React from "react";
import { WindowTitle } from "@saleor/components/WindowTitle";
@ -8,7 +9,11 @@ import useCustomerSearch from "@saleor/searches/useCustomerSearch";
import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
import NotFoundPage from "@saleor/components/NotFoundPage";
import { customerUrl } from "../../../customers/urls";
import { getMutationState, maybe, transformAddressToForm } from "../../../misc";
import {
maybe,
transformAddressToForm,
getStringOrPlaceholder
} from "../../../misc";
import { productUrl } from "../../../products/urls";
import { OrderStatus } from "../../../types/globalTypes";
import OrderAddressEditDialog from "../../components/OrderAddressEditDialog";
@ -90,6 +95,12 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
} = useOrderVariantSearch({
variables: DEFAULT_INITIAL_SEARCH_DATA
});
const intl = useIntl();
const [openModal, closeModal] = createDialogActionHandlers<
OrderUrlDialog,
OrderUrlQueryParams
>(navigate, params => orderUrl(id, params), params);
const handleBack = () => navigate(orderListUrl());
@ -102,13 +113,8 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
return <NotFoundPage onBack={handleBack} />;
}
const [openModal, closeModal] = createDialogActionHandlers<
OrderUrlDialog,
OrderUrlQueryParams
>(navigate, params => orderUrl(id, params), params);
return (
<OrderDetailsMessages>
<OrderDetailsMessages id={id} params={params}>
{orderMessages => (
<OrderOperations
order={id}
@ -158,10 +164,20 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
orderPaymentMarkAsPaid
}) => (
<>
{maybe(() => order.status !== OrderStatus.DRAFT) ? (
{order?.status !== OrderStatus.DRAFT ? (
<>
<WindowTitle
title={maybe(() => "Order #" + data.order.number)}
title={intl.formatMessage(
{
defaultMessage: "Order #{orderNumber}",
description: "window title"
},
{
orderNumber: getStringOrPlaceholder(
data?.order?.number
)
}
)}
/>
<OrderDetailsPage
onNoteAdd={variables =>
@ -211,12 +227,11 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
}
/>
<OrderCancelDialog
confirmButtonState={getMutationState(
orderCancel.opts.called,
orderCancel.opts.loading,
confirmButtonState={orderCancel.opts.status}
errors={
orderCancel.opts.data?.orderCancel.errors || []
)}
number={maybe(() => order.number)}
}
number={order?.number}
open={params.action === "cancel"}
onClose={closeModal}
onSubmit={variables =>
@ -227,15 +242,13 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
}
/>
<OrderMarkAsPaidDialog
confirmButtonState={getMutationState(
orderPaymentMarkAsPaid.opts.called,
orderPaymentMarkAsPaid.opts.loading,
maybe(
() =>
orderPaymentMarkAsPaid.opts.data.orderMarkAsPaid
.errors
)
)}
confirmButtonState={
orderPaymentMarkAsPaid.opts.status
}
errors={
orderPaymentMarkAsPaid.opts.data?.orderMarkAsPaid
.errors || []
}
onClose={closeModal}
onConfirm={() =>
orderPaymentMarkAsPaid.mutate({
@ -245,26 +258,19 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
open={params.action === "mark-paid"}
/>
<OrderPaymentVoidDialog
confirmButtonState={getMutationState(
orderVoid.opts.called,
orderVoid.opts.loading,
maybe(() => orderVoid.opts.data.orderVoid.errors)
)}
confirmButtonState={orderVoid.opts.status}
errors={orderVoid.opts.data?.orderVoid.errors || []}
open={params.action === "void"}
onClose={closeModal}
onConfirm={() => orderVoid.mutate({ id })}
/>
<OrderPaymentDialog
confirmButtonState={getMutationState(
orderPaymentCapture.opts.called,
orderPaymentCapture.opts.loading,
maybe(
() =>
orderPaymentCapture.opts.data.orderCapture
.errors
)
)}
initial={maybe(() => order.total.gross.amount)}
confirmButtonState={orderPaymentCapture.opts.status}
errors={
orderPaymentCapture.opts.data?.orderCapture
.errors || []
}
initial={order?.total.gross.amount}
open={params.action === "capture"}
variant="capture"
onClose={closeModal}
@ -276,13 +282,12 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
}
/>
<OrderPaymentDialog
confirmButtonState={getMutationState(
orderPaymentRefund.opts.called,
orderPaymentRefund.opts.loading,
confirmButtonState={orderPaymentRefund.opts.status}
errors={
orderPaymentRefund.opts.data?.orderRefund.errors ||
[]
)}
initial={maybe(() => order.total.gross.amount)}
[]
}
initial={order?.total.gross.amount}
open={params.action === "refund"}
variant="refund"
onClose={closeModal}
@ -294,15 +299,13 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
}
/>
<OrderFulfillmentDialog
confirmButtonState={getMutationState(
orderCreateFulfillment.opts.called,
orderCreateFulfillment.opts.loading,
maybe(
() =>
orderCreateFulfillment.opts.data
.orderFulfillmentCreate.errors
)
)}
confirmButtonState={
orderCreateFulfillment.opts.status
}
errors={
orderCreateFulfillment.opts.data
?.orderFulfillmentCreate.errors || []
}
open={params.action === "fulfill"}
lines={maybe(() => order.lines, []).filter(
line => line.quantityFulfilled < line.quantity
@ -328,15 +331,13 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
}
/>
<OrderFulfillmentCancelDialog
confirmButtonState={getMutationState(
orderFulfillmentCancel.opts.called,
orderFulfillmentCancel.opts.loading,
maybe(
() =>
orderFulfillmentCancel.opts.data
.orderFulfillmentCancel.errors
)
)}
confirmButtonState={
orderFulfillmentCancel.opts.status
}
errors={
orderFulfillmentCancel.opts.data
?.orderFulfillmentCancel.errors || []
}
open={params.action === "cancel-fulfillment"}
onConfirm={variables =>
orderFulfillmentCancel.mutate({
@ -347,21 +348,18 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
onClose={closeModal}
/>
<OrderFulfillmentTrackingDialog
confirmButtonState={getMutationState(
orderFulfillmentUpdateTracking.opts.called,
orderFulfillmentUpdateTracking.opts.loading,
maybe(
() =>
orderFulfillmentUpdateTracking.opts.data
.orderFulfillmentUpdateTracking.errors
)
)}
confirmButtonState={
orderFulfillmentUpdateTracking.opts.status
}
errors={
orderFulfillmentUpdateTracking.opts.data
?.orderFulfillmentUpdateTracking.errors || []
}
open={params.action === "edit-fulfillment"}
trackingNumber={maybe(
() =>
data.order.fulfillments.find(
fulfillment => fulfillment.id === params.id
).trackingNumber
trackingNumber={getStringOrPlaceholder(
data?.order?.fulfillments.find(
fulfillment => fulfillment.id === params.id
)?.trackingNumber
)}
onConfirm={variables =>
orderFulfillmentUpdateTracking.mutate({
@ -378,8 +376,16 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
) : (
<>
<WindowTitle
title={maybe(
() => "Draft order #" + data.order.number
title={intl.formatMessage(
{
defaultMessage: "Draft Order #{orderNumber}",
description: "window title"
},
{
orderNumber: getStringOrPlaceholder(
data?.order?.number
)
}
)}
/>
<OrderDraftPage
@ -447,46 +453,39 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
userPermissions={maybe(() => user.permissions, [])}
/>
<OrderDraftCancelDialog
confirmButtonState={getMutationState(
orderDraftCancel.opts.called,
orderDraftCancel.opts.loading,
maybe(
() =>
orderDraftCancel.opts.data.draftOrderDelete
.errors
)
)}
confirmButtonState={orderDraftCancel.opts.status}
errors={
orderDraftCancel.opts.data?.draftOrderDelete
.errors || []
}
onClose={closeModal}
onConfirm={() => orderDraftCancel.mutate({ id })}
open={params.action === "cancel"}
orderNumber={maybe(() => order.number)}
orderNumber={getStringOrPlaceholder(order?.number)}
/>
<OrderDraftFinalizeDialog
confirmButtonState={orderDraftFinalize.opts.status}
errors={
orderDraftFinalize.opts.data?.draftOrderComplete
.errors || []
}
onClose={closeModal}
onConfirm={() => orderDraftFinalize.mutate({ id })}
open={params.action === "finalize"}
orderNumber={maybe(() => order.number)}
orderNumber={getStringOrPlaceholder(order?.number)}
warnings={orderDraftFinalizeWarnings(order)}
/>
<OrderShippingMethodEditDialog
confirmButtonState={getMutationState(
orderShippingMethodUpdate.opts.called,
orderShippingMethodUpdate.opts.loading,
maybe(
() =>
orderShippingMethodUpdate.opts.data
.orderUpdateShipping.errors
)
)}
confirmButtonState={
orderShippingMethodUpdate.opts.status
}
errors={
orderShippingMethodUpdate.opts.data
?.orderUpdateShipping.errors || []
}
open={params.action === "edit-shipping"}
shippingMethod={maybe(
() => order.shippingMethod.id,
"..."
)}
shippingMethods={maybe(
() => order.availableShippingMethods
)}
shippingMethod={order?.shippingMethod?.id}
shippingMethods={order?.availableShippingMethods}
onClose={closeModal}
onSubmit={variables =>
orderShippingMethodUpdate.mutate({
@ -498,25 +497,18 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
}
/>
<OrderProductAddDialog
confirmButtonState={getMutationState(
orderLinesAdd.opts.called,
orderLinesAdd.opts.loading,
maybe(
() =>
orderLinesAdd.opts.data.draftOrderLinesCreate
.errors
)
)}
confirmButtonState={orderLinesAdd.opts.status}
errors={
orderLinesAdd.opts.data?.draftOrderLinesCreate
.errors || []
}
loading={variantSearchOpts.loading}
open={params.action === "add-order-line"}
hasMore={maybe(
() =>
variantSearchOpts.data.search.pageInfo.hasNextPage
)}
products={maybe(() =>
variantSearchOpts.data.search.edges.map(
edge => edge.node
)
hasMore={
variantSearchOpts.data?.search.pageInfo.hasNextPage
}
products={variantSearchOpts.data?.search.edges.map(
edge => edge.node
)}
onClose={closeModal}
onFetch={variantSearch}
@ -534,24 +526,15 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
</>
)}
<OrderAddressEditDialog
confirmButtonState={getMutationState(
orderUpdate.opts.called,
orderUpdate.opts.loading,
maybe(() => orderUpdate.opts.data.orderUpdate.errors)
)}
address={transformAddressToForm(
maybe(() => order.shippingAddress)
)}
countries={maybe(() => data.shop.countries, []).map(
country => ({
confirmButtonState={orderUpdate.opts.status}
address={transformAddressToForm(order?.shippingAddress)}
countries={
data?.shop?.countries.map(country => ({
code: country.code,
label: country.country
})
)}
errors={maybe(
() => orderUpdate.opts.data.orderUpdate.errors,
[]
)}
})) || []
}
errors={orderUpdate.opts.data?.orderUpdate.errors || []}
open={params.action === "edit-shipping-address"}
variant="shipping"
onClose={closeModal}
@ -565,24 +548,15 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
}
/>
<OrderAddressEditDialog
confirmButtonState={getMutationState(
orderUpdate.opts.called,
orderUpdate.opts.loading,
maybe(() => orderUpdate.opts.data.orderUpdate.errors)
)}
address={transformAddressToForm(
maybe(() => order.billingAddress)
)}
countries={maybe(() => data.shop.countries, []).map(
country => ({
confirmButtonState={orderUpdate.opts.status}
address={transformAddressToForm(order?.billingAddress)}
countries={
data?.shop?.countries.map(country => ({
code: country.code,
label: country.country
})
)}
errors={maybe(
() => orderUpdate.opts.data.orderUpdate.errors,
[]
)}
})) || []
}
errors={orderUpdate.opts.data?.orderUpdate.errors || []}
open={params.action === "edit-billing-address"}
variant="billing"
onClose={closeModal}

66
src/storybook/__snapshots__/Stories.test.ts.snap
View file

@ -7939,6 +7939,12 @@ exports[`Storyshots Orders / OrderCancelDialog default 1`] = `
/>
`;
exports[`Storyshots Orders / OrderCancelDialog errors 1`] = `
<div
style="padding:24px"
/>
`;
exports[`Storyshots Orders / OrderCustomer default 1`] = `
<div
style="padding:24px"
@ -8522,12 +8528,24 @@ exports[`Storyshots Orders / OrderDraftCancelDialog default 1`] = `
/>
`;
exports[`Storyshots Orders / OrderDraftCancelDialog errors 1`] = `
<div
style="padding:24px"
/>
`;
exports[`Storyshots Orders / OrderDraftFinalizeDialog default 1`] = `
<div
style="padding:24px"
/>
`;
exports[`Storyshots Orders / OrderDraftFinalizeDialog with errors 1`] = `
<div
style="padding:24px"
/>
`;
exports[`Storyshots Orders / OrderDraftFinalizeDialog with warnings 1`] = `
<div
style="padding:24px"
@ -8540,18 +8558,36 @@ exports[`Storyshots Orders / OrderFulfillmentCancelDialog default 1`] = `
/>
`;
exports[`Storyshots Orders / OrderFulfillmentCancelDialog error 1`] = `
<div
style="padding:24px"
/>
`;
exports[`Storyshots Orders / OrderFulfillmentDialog default 1`] = `
<div
style="padding:24px"
/>
`;
exports[`Storyshots Orders / OrderFulfillmentDialog errors 1`] = `
<div
style="padding:24px"
/>
`;
exports[`Storyshots Orders / OrderFulfillmentTrackingDialog default 1`] = `
<div
style="padding:24px"
/>
`;
exports[`Storyshots Orders / OrderFulfillmentTrackingDialog errors 1`] = `
<div
style="padding:24px"
/>
`;
exports[`Storyshots Orders / OrderHistory default 1`] = `
<div
style="padding:24px"
@ -8681,12 +8717,24 @@ exports[`Storyshots Orders / OrderMarkAsPaidDialog default 1`] = `
/>
`;
exports[`Storyshots Orders / OrderMarkAsPaidDialog errors 1`] = `
<div
style="padding:24px"
/>
`;
exports[`Storyshots Orders / OrderPaymentDialog capture payment 1`] = `
<div
style="padding:24px"
/>
`;
exports[`Storyshots Orders / OrderPaymentDialog errors 1`] = `
<div
style="padding:24px"
/>
`;
exports[`Storyshots Orders / OrderPaymentDialog refund payment 1`] = `
<div
style="padding:24px"
@ -8699,18 +8747,36 @@ exports[`Storyshots Orders / OrderPaymentVoidDialog default 1`] = `
/>
`;
exports[`Storyshots Orders / OrderPaymentVoidDialog errors 1`] = `
<div
style="padding:24px"
/>
`;
exports[`Storyshots Orders / OrderProductAddDialog default 1`] = `
<div
style="padding:24px"
/>
`;
exports[`Storyshots Orders / OrderProductAddDialog errors 1`] = `
<div
style="padding:24px"
/>
`;
exports[`Storyshots Orders / OrderShippingMethodEditDialog default 1`] = `
<div
style="padding:24px"
/>
`;
exports[`Storyshots Orders / OrderShippingMethodEditDialog errors 1`] = `
<div
style="padding:24px"
/>
`;
exports[`Storyshots Product types / ProductTypeDeleteDialog default 1`] = `
<div
style="padding:24px"

27
src/storybook/stories/orders/OrderCancelDialog.tsx
View file

@ -1,17 +1,42 @@
import { storiesOf } from "@storybook/react";
import React from "react";
import OrderCancelDialog from "../../../orders/components/OrderCancelDialog";
import { OrderErrorCode } from "@saleor/types/globalTypes";
import OrderCancelDialog, {
OrderCancelDialogProps
} from "../../../orders/components/OrderCancelDialog";
import Decorator from "../../Decorator";
const props: OrderCancelDialogProps = {
confirmButtonState: "default",
errors: [],
number: "123",
onClose: () => undefined,
onSubmit: () => undefined,
open: true
};
storiesOf("Orders / OrderCancelDialog", module)
.addDecorator(Decorator)
.add("default", () => (
<OrderCancelDialog
confirmButtonState="default"
errors={[]}
open={true}
number="123"
onSubmit={undefined}
onClose={undefined}
/>
))
.add("errors", () => (
<OrderCancelDialog
{...props}
errors={[
{
__typename: "OrderError",
code: OrderErrorCode.CANNOT_CANCEL_ORDER,
field: null
}
]}
/>
));

16
src/storybook/stories/orders/OrderDraftCancelDialog.tsx
View file

@ -1,6 +1,7 @@
import { storiesOf } from "@storybook/react";
import React from "react";
import { OrderErrorCode } from "@saleor/types/globalTypes";
import OrderDraftCancelDialog, {
OrderDraftCancelDialogProps
} from "../../../orders/components/OrderDraftCancelDialog";
@ -8,6 +9,7 @@ import Decorator from "../../Decorator";
const props: OrderDraftCancelDialogProps = {
confirmButtonState: "default",
errors: [],
onClose: () => undefined,
onConfirm: () => undefined,
open: true,
@ -16,4 +18,16 @@ const props: OrderDraftCancelDialogProps = {
storiesOf("Orders / OrderDraftCancelDialog", module)
.addDecorator(Decorator)
.add("default", () => <OrderDraftCancelDialog {...props} />);
.add("default", () => <OrderDraftCancelDialog {...props} />)
.add("errors", () => (
<OrderDraftCancelDialog
{...props}
errors={[
{
__typename: "OrderError",
code: OrderErrorCode.GRAPHQL_ERROR,
field: null
}
]}
/>
));

14
src/storybook/stories/orders/OrderDraftFinalizeDialog.tsx
View file

@ -1,6 +1,7 @@
import { storiesOf } from "@storybook/react";
import React from "react";
import { OrderErrorCode } from "@saleor/types/globalTypes";
import OrderDraftFinalize, {
OrderDraftFinalizeDialogProps,
OrderDraftFinalizeWarning
@ -9,6 +10,7 @@ import Decorator from "../../Decorator";
const props: OrderDraftFinalizeDialogProps = {
confirmButtonState: "default",
errors: [],
onClose: () => undefined,
onConfirm: () => undefined,
open: true,
@ -29,4 +31,16 @@ storiesOf("Orders / OrderDraftFinalizeDialog", module)
OrderDraftFinalizeWarning.NO_USER
]}
/>
))
.add("with errors", () => (
<OrderDraftFinalize
{...props}
errors={[
{
__typename: "OrderError",
code: OrderErrorCode.GRAPHQL_ERROR,
field: null
}
]}
/>
));

28
src/storybook/stories/orders/OrderFulfillmentCancelDialog.tsx
View file

@ -1,16 +1,32 @@
import { storiesOf } from "@storybook/react";
import React from "react";
import OrderFulfillmentCancelDialog from "../../../orders/components/OrderFulfillmentCancelDialog";
import { OrderErrorCode } from "@saleor/types/globalTypes";
import OrderFulfillmentCancelDialog, {
OrderFulfillmentCancelDialogProps
} from "../../../orders/components/OrderFulfillmentCancelDialog";
import Decorator from "../../Decorator";
const props: OrderFulfillmentCancelDialogProps = {
confirmButtonState: "default",
errors: [],
onClose: () => undefined,
onConfirm: () => undefined,
open: true
};
storiesOf("Orders / OrderFulfillmentCancelDialog", module)
.addDecorator(Decorator)
.add("default", () => (
.add("default", () => <OrderFulfillmentCancelDialog {...props} />)
.add("error", () => (
<OrderFulfillmentCancelDialog
confirmButtonState="default"
open={true}
onConfirm={undefined}
onClose={undefined}
{...props}
errors={[
{
__typename: "OrderError",
code: OrderErrorCode.GRAPHQL_ERROR,
field: null
}
]}
/>
));

21
src/storybook/stories/orders/OrderFulfillmentDialog.tsx
View file

@ -3,6 +3,7 @@ import { storiesOf } from "@storybook/react";
import React from "react";
import placeholderImage from "@assets/images/placeholder60x60.png";
import { OrderErrorCode } from "@saleor/types/globalTypes";
import OrderFulfillmentDialog, {
OrderFulfillmentDialogProps
} from "../../../orders/components/OrderFulfillmentDialog";
@ -13,6 +14,7 @@ const order = orderFixture(placeholderImage);
const props: Omit<OrderFulfillmentDialogProps, "classes"> = {
confirmButtonState: "default",
errors: [],
lines: order.lines,
onClose: undefined,
onSubmit: undefined,
@ -21,4 +23,21 @@ const props: Omit<OrderFulfillmentDialogProps, "classes"> = {
storiesOf("Orders / OrderFulfillmentDialog", module)
.addDecorator(Decorator)
.add("default", () => <OrderFulfillmentDialog {...props} />);
.add("default", () => <OrderFulfillmentDialog {...props} />)
.add("errors", () => (
<OrderFulfillmentDialog
{...props}
errors={[
{
__typename: "OrderError",
code: OrderErrorCode.FULFILL_ORDER_LINE,
field: null
},
{
__typename: "OrderError",
code: OrderErrorCode.INVALID,
field: "trackingNumber"
}
]}
/>
));

35
src/storybook/stories/orders/OrderFulfillmentTrackingDialog.tsx
View file

@ -1,17 +1,38 @@
import { storiesOf } from "@storybook/react";
import React from "react";
import OrderFulfillmentTrackingDialog from "../../../orders/components/OrderFulfillmentTrackingDialog";
import { OrderErrorCode } from "@saleor/types/globalTypes";
import OrderFulfillmentTrackingDialog, {
OrderFulfillmentTrackingDialogProps
} from "../../../orders/components/OrderFulfillmentTrackingDialog";
import Decorator from "../../Decorator";
const props: OrderFulfillmentTrackingDialogProps = {
confirmButtonState: "default",
errors: [],
onClose: () => undefined,
onConfirm: () => undefined,
open: true,
trackingNumber: "21kn7526v1"
};
storiesOf("Orders / OrderFulfillmentTrackingDialog", module)
.addDecorator(Decorator)
.add("default", () => (
.add("default", () => <OrderFulfillmentTrackingDialog {...props} />)
.add("errors", () => (
<OrderFulfillmentTrackingDialog
confirmButtonState="default"
open={true}
trackingNumber="21kn7526v1"
onConfirm={undefined}
onClose={undefined}
{...props}
errors={[
{
__typename: "OrderError",
code: OrderErrorCode.GRAPHQL_ERROR,
field: null
},
{
__typename: "OrderError",
code: OrderErrorCode.INVALID,
field: "trackingNumber"
}
]}
/>
));

16
src/storybook/stories/orders/OrderMarkAsPaidDialog.tsx
View file

@ -1,6 +1,7 @@
import { storiesOf } from "@storybook/react";
import React from "react";
import { OrderErrorCode } from "@saleor/types/globalTypes";
import OrderMarkAsPaidDialog, {
OrderMarkAsPaidDialogProps
} from "../../../orders/components/OrderMarkAsPaidDialog";
@ -8,6 +9,7 @@ import Decorator from "../../Decorator";
const props: OrderMarkAsPaidDialogProps = {
confirmButtonState: "default",
errors: [],
onClose: () => undefined,
onConfirm: () => undefined,
open: true
@ -15,4 +17,16 @@ const props: OrderMarkAsPaidDialogProps = {
storiesOf("Orders / OrderMarkAsPaidDialog", module)
.addDecorator(Decorator)
.add("default", () => <OrderMarkAsPaidDialog {...props} />);
.add("default", () => <OrderMarkAsPaidDialog {...props} />)
.add("errors", () => (
<OrderMarkAsPaidDialog
{...props}
errors={[
{
__typename: "OrderError",
code: OrderErrorCode.GRAPHQL_ERROR,
field: null
}
]}
/>
));

47
src/storybook/stories/orders/OrderPaymentDialog.tsx
View file

@ -1,28 +1,43 @@
import { storiesOf } from "@storybook/react";
import React from "react";
import OrderPaymentDialog from "../../../orders/components/OrderPaymentDialog";
import { OrderErrorCode } from "@saleor/types/globalTypes";
import OrderPaymentDialog, {
OrderPaymentDialogProps
} from "../../../orders/components/OrderPaymentDialog";
import Decorator from "../../Decorator";
const props: OrderPaymentDialogProps = {
confirmButtonState: "default",
errors: [],
initial: 0,
onClose: () => undefined,
onSubmit: () => undefined,
open: true,
variant: "capture"
};
storiesOf("Orders / OrderPaymentDialog", module)
.addDecorator(Decorator)
.add("capture payment", () => (
<OrderPaymentDialog
confirmButtonState="default"
initial={0}
variant="capture"
open={true}
onClose={undefined}
onSubmit={undefined}
/>
))
.add("capture payment", () => <OrderPaymentDialog {...props} />)
.add("refund payment", () => (
<OrderPaymentDialog {...props} variant="refund" />
))
.add("errors", () => (
<OrderPaymentDialog
confirmButtonState="default"
initial={0}
{...props}
errors={[
{
__typename: "OrderError",
code: OrderErrorCode.CANNOT_REFUND,
field: null
},
{
__typename: "OrderError",
code: OrderErrorCode.INVALID,
field: "payment"
}
]}
variant="refund"
open={true}
onClose={undefined}
onSubmit={undefined}
/>
));

28
src/storybook/stories/orders/OrderPaymentVoidDialog.tsx
View file

@ -1,16 +1,32 @@
import { storiesOf } from "@storybook/react";
import React from "react";
import OrderPaymentVoidDialog from "../../../orders/components/OrderPaymentVoidDialog";
import { OrderErrorCode } from "@saleor/types/globalTypes";
import OrderPaymentVoidDialog, {
OrderPaymentVoidDialogProps
} from "../../../orders/components/OrderPaymentVoidDialog";
import Decorator from "../../Decorator";
const props: OrderPaymentVoidDialogProps = {
confirmButtonState: "default",
errors: [],
onClose: () => undefined,
onConfirm: () => undefined,
open: true
};
storiesOf("Orders / OrderPaymentVoidDialog", module)
.addDecorator(Decorator)
.add("default", () => (
.add("default", () => <OrderPaymentVoidDialog {...props} />)
.add("errors", () => (
<OrderPaymentVoidDialog
confirmButtonState="default"
open={true}
onConfirm={undefined}
onClose={undefined}
{...props}
errors={[
{
__typename: "OrderError",
code: OrderErrorCode.VOID_INACTIVE_PAYMENT,
field: null
}
]}
/>
));

37
src/storybook/stories/orders/OrderProductAddDialog.tsx
View file

@ -2,22 +2,37 @@ import { storiesOf } from "@storybook/react";
import React from "react";
import placeholderImage from "@assets/images/placeholder60x60.png";
import OrderProductAddDialog from "../../../orders/components/OrderProductAddDialog";
import { fetchMoreProps } from "@saleor/fixtures";
import { OrderErrorCode } from "@saleor/types/globalTypes";
import OrderProductAddDialog, {
OrderProductAddDialogProps
} from "../../../orders/components/OrderProductAddDialog";
import { orderLineSearch } from "../../../orders/fixtures";
import Decorator from "../../Decorator";
const props: OrderProductAddDialogProps = {
...fetchMoreProps,
confirmButtonState: "default",
errors: [],
onClose: () => undefined,
onFetch: () => undefined,
onSubmit: () => undefined,
open: true,
products: orderLineSearch(placeholderImage)
};
storiesOf("Orders / OrderProductAddDialog", module)
.addDecorator(Decorator)
.add("default", () => (
.add("default", () => <OrderProductAddDialog {...props} />)
.add("errors", () => (
<OrderProductAddDialog
confirmButtonState="default"
loading={false}
open={true}
onClose={undefined}
onSubmit={undefined}
hasMore={false}
onFetch={() => undefined}
onFetchMore={() => undefined}
products={orderLineSearch(placeholderImage)}
{...props}
errors={[
{
__typename: "OrderError",
code: OrderErrorCode.GRAPHQL_ERROR,
field: null
}
]}
/>
));

36
src/storybook/stories/orders/OrderShippingMethodEditDialog.tsx
View file

@ -1,21 +1,41 @@
import { storiesOf } from "@storybook/react";
import React from "react";
import OrderShippingMethodEditDialog from "../../../orders/components/OrderShippingMethodEditDialog";
import { OrderErrorCode } from "@saleor/types/globalTypes";
import OrderShippingMethodEditDialog, {
OrderShippingMethodEditDialogProps
} from "../../../orders/components/OrderShippingMethodEditDialog";
import { order as orderFixture } from "../../../orders/fixtures";
import Decorator from "../../Decorator";
const order = orderFixture("");
const props: OrderShippingMethodEditDialogProps = {
confirmButtonState: "default",
errors: [],
onClose: () => undefined,
onSubmit: () => undefined,
open: true,
shippingMethod: null,
shippingMethods: order.availableShippingMethods
};
storiesOf("Orders / OrderShippingMethodEditDialog", module)
.addDecorator(Decorator)
.add("default", () => (
.add("default", () => <OrderShippingMethodEditDialog {...props} />)
.add("errors", () => (
<OrderShippingMethodEditDialog
confirmButtonState="default"
onClose={undefined}
onSubmit={undefined}
open={true}
shippingMethod={null}
shippingMethods={order.availableShippingMethods}
{...props}
errors={[
{
__typename: "OrderError",
code: OrderErrorCode.SHIPPING_METHOD_NOT_APPLICABLE,
field: "shippingMethod"
},
{
__typename: "OrderError",
code: OrderErrorCode.GRAPHQL_ERROR,
field: null
}
]}
/>
));

80
src/utils/errors/order.ts
View file

@ -1,22 +1,100 @@
import { IntlShape } from "react-intl";
import { IntlShape, defineMessages } from "react-intl";
import { OrderErrorCode } from "@saleor/types/globalTypes";
import { commonMessages } from "@saleor/intl";
import { OrderErrorFragment } from "@saleor/orders/types/OrderErrorFragment";
import commonErrorMessages from "./common";
const messages = defineMessages({
billingNotSet: {
defaultMessage: "Billing address is not set",
description: "error message"
},
cannotCancelFulfillment: {
defaultMessage: "This fulfillment cannot be cancelled",
description: "error message"
},
cannotCancelOrder: {
defaultMessage: "This order cannot be cancelled",
description: "error message"
},
cannotFulfillLine: {
defaultMessage: "Not enough items to fulfill",
description: "error message"
},
cannotRefund: {
defaultMessage: "Manual payments can not be refunded",
description: "error message"
},
cannotVoid: {
defaultMessage: "Only pre-authorized payments can be voided",
description: "error message"
},
captureInactive: {
defaultMessage: "Only pre-authorized payments can be captured",
description: "error message"
},
noShippingAddress: {
defaultMessage:
"Cannot choose a shipping method for an order without the shipping address",
description: "error message"
},
notEditable: {
defaultMessage: "Only draft orders can be edited",
description: "error message"
},
paymentMissing: {
defaultMessage: "There's no payment associated with the order",
description: "error message"
},
shippingNotApplicable: {
defaultMessage: "Shipping method is not valid for chosen shipping address",
description: "error message"
},
shippingRequired: {
defaultMessage: "Shipping method is required for this order",
description: "error message"
}
});
// cannot_delete
function getOrderErrorMessage(
err: OrderErrorFragment,
intl: IntlShape
): string {
if (err) {
switch (err.code) {
case OrderErrorCode.BILLING_ADDRESS_NOT_SET:
return intl.formatMessage(messages.billingNotSet);
case OrderErrorCode.CANNOT_CANCEL_FULFILLMENT:
return intl.formatMessage(messages.cannotCancelFulfillment);
case OrderErrorCode.CANNOT_CANCEL_ORDER:
return intl.formatMessage(messages.cannotCancelOrder);
case OrderErrorCode.CANNOT_REFUND:
return intl.formatMessage(messages.cannotRefund);
case OrderErrorCode.CAPTURE_INACTIVE_PAYMENT:
return intl.formatMessage(messages.captureInactive);
case OrderErrorCode.FULFILL_ORDER_LINE:
return intl.formatMessage(messages.cannotFulfillLine);
case OrderErrorCode.GRAPHQL_ERROR:
return intl.formatMessage(commonErrorMessages.graphqlError);
case OrderErrorCode.INVALID:
return intl.formatMessage(commonErrorMessages.invalid);
case OrderErrorCode.NOT_EDITABLE:
return intl.formatMessage(messages.notEditable);
case OrderErrorCode.ORDER_NO_SHIPPING_ADDRESS:
return intl.formatMessage(messages.noShippingAddress);
case OrderErrorCode.PAYMENT_MISSING:
return intl.formatMessage(messages.paymentMissing);
case OrderErrorCode.REQUIRED:
return intl.formatMessage(commonMessages.requiredField);
case OrderErrorCode.SHIPPING_METHOD_NOT_APPLICABLE:
return intl.formatMessage(messages.shippingNotApplicable);
case OrderErrorCode.SHIPPING_METHOD_REQUIRED:
return intl.formatMessage(messages.shippingRequired);
case OrderErrorCode.VOID_INACTIVE_PAYMENT:
return intl.formatMessage(messages.cannotVoid);
default:
return intl.formatMessage(commonErrorMessages.unknownError);
}