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

Merge pull request #487 from mirumee/warehouses/fulfillment-view

Browse source 
Add fulfillment view
This commit is contained in:
Marcin Gębala 2020-04-28 17:21:37 +02:00 committed by GitHub
commit 37b43a064c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
49 changed files with 4133 additions and 1511 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/hooks/useFormset.ts
View file

@ -18,8 +18,8 @@ export interface UseFormsetOutput<TData = object, TValue = any> {
set: (data: FormsetData<TData, TValue>) => void; set: (data: FormsetData<TData, TValue>) => void;
} }
function useFormset<TData = object, TValue = any>( function useFormset<TData = object, TValue = any>(
initial: FormsetData<TData> initial: FormsetData<TData, TValue>
): UseFormsetOutput<TData> { ): UseFormsetOutput<TData, TValue> {
const [data, setData] = useStateFromProps<FormsetData<TData, TValue>>( const [data, setData] = useStateFromProps<FormsetData<TData, TValue>>(
initial || [] initial || []
); );

8
src/intl.ts
View file

@ -81,6 +81,10 @@ export const commonMessages = defineMessages({
}); });
export const buttonMessages = defineMessages({ export const buttonMessages = defineMessages({
accept: {
defaultMessage: "Accept",
description: "button"
},
back: { back: {
defaultMessage: "Back", defaultMessage: "Back",
description: "button" description: "button"
@ -117,6 +121,10 @@ export const buttonMessages = defineMessages({
defaultMessage: "Manage", defaultMessage: "Manage",
description: "button" description: "button"
}, },
ok: {
defaultMessage: "OK",
description: "button"
},
remove: { remove: {
defaultMessage: "Remove", defaultMessage: "Remove",
description: "button" description: "button"

15
src/orders/components/OrderBulkCancelDialog/OrderBulkCancelDialog.tsx
View file

@ -4,14 +4,13 @@ import { FormattedMessage, useIntl } from "react-intl";
import ActionDialog from "@saleor/components/ActionDialog"; import ActionDialog from "@saleor/components/ActionDialog";
import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
export interface OrderBulkCancelDialogProps { export interface OrderBulkCancelDialogProps {
confirmButtonState: ConfirmButtonTransitionState; confirmButtonState: ConfirmButtonTransitionState;
numberOfOrders: string; numberOfOrders: string;
open: boolean; open: boolean;
onClose: () => void; onClose: () => void;
onConfirm: (restock: boolean) => void; onConfirm: () => void;
} }
const OrderBulkCancelDialog: React.FC<OrderBulkCancelDialogProps> = ({ const OrderBulkCancelDialog: React.FC<OrderBulkCancelDialogProps> = ({
@ -22,7 +21,6 @@ const OrderBulkCancelDialog: React.FC<OrderBulkCancelDialogProps> = ({
onConfirm onConfirm
}) => { }) => {
const intl = useIntl(); const intl = useIntl();
const [restock, setRestock] = React.useState(true);
return ( return (
<ActionDialog <ActionDialog
@ -34,7 +32,7 @@ const OrderBulkCancelDialog: React.FC<OrderBulkCancelDialogProps> = ({
description: "dialog header" description: "dialog header"
})} })}
onClose={onClose} onClose={onClose}
onConfirm={() => onConfirm(restock)} onConfirm={onConfirm}
> >
<DialogContentText> <DialogContentText>
<FormattedMessage <FormattedMessage
@ -45,15 +43,6 @@ const OrderBulkCancelDialog: React.FC<OrderBulkCancelDialogProps> = ({
}} }}
/> />
</DialogContentText> </DialogContentText>
<ControlledCheckbox
checked={restock}
label={intl.formatMessage({
defaultMessage: "Release all stock allocated to these orders",
description: "switch button"
})}
name="restock"
onChange={event => setRestock(event.target.value)}
/>
</ActionDialog> </ActionDialog>
); );
}; };

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

@ -4,45 +4,25 @@ import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent"; import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText"; import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle"; import DialogTitle from "@material-ui/core/DialogTitle";
import { makeStyles } from "@material-ui/core/styles";
import React from "react"; import React from "react";
import { FormattedMessage, useIntl } from "react-intl"; import { FormattedMessage, useIntl } from "react-intl";
import ConfirmButton, { import ConfirmButton, {
ConfirmButtonTransitionState ConfirmButtonTransitionState
} from "@saleor/components/ConfirmButton"; } from "@saleor/components/ConfirmButton";
import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
import Form from "@saleor/components/Form";
import { buttonMessages } from "@saleor/intl"; import { buttonMessages } from "@saleor/intl";
import { OrderErrorFragment } from "@saleor/orders/types/OrderErrorFragment"; import { OrderErrorFragment } from "@saleor/orders/types/OrderErrorFragment";
import FormSpacer from "@saleor/components/FormSpacer"; import FormSpacer from "@saleor/components/FormSpacer";
import getOrderErrorMessage from "@saleor/utils/errors/order"; import getOrderErrorMessage from "@saleor/utils/errors/order";
import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors"; import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
export interface FormData {
restock: boolean;
}
const useStyles = makeStyles(
theme => ({
deleteButton: {
"&:hover": {
backgroundColor: theme.palette.error.main
},
backgroundColor: theme.palette.error.main,
color: theme.palette.error.contrastText
}
}),
{ name: "OrderCancelDialog" }
);
export interface OrderCancelDialogProps { export interface OrderCancelDialogProps {
confirmButtonState: ConfirmButtonTransitionState; confirmButtonState: ConfirmButtonTransitionState;
errors: OrderErrorFragment[]; errors: OrderErrorFragment[];
number: string; number: string;
open: boolean; open: boolean;
onClose?(); onClose: () => void;
onSubmit(data: FormData); onSubmit: () => void;
} }
const OrderCancelDialog: React.FC<OrderCancelDialogProps> = props => { const OrderCancelDialog: React.FC<OrderCancelDialogProps> = props => {
@ -55,76 +35,52 @@ const OrderCancelDialog: React.FC<OrderCancelDialogProps> = props => {
onClose onClose
} = props; } = props;
const classes = useStyles(props);
const intl = useIntl(); const intl = useIntl();
const errors = useModalDialogErrors(apiErrors, open); const errors = useModalDialogErrors(apiErrors, open);
return ( return (
<Dialog onClose={onClose} open={open}> <Dialog onClose={onClose} open={open} maxWidth="sm">
<Form <DialogTitle>
initial={{ <FormattedMessage
restock: true defaultMessage="Cancel Order"
}} description="dialog header"
onSubmit={onSubmit} id="OrderCancelDialogHeader"
> />
{({ data, change }) => ( </DialogTitle>
<DialogContent>
<DialogContentText>
<FormattedMessage
defaultMessage="Cancelling this order will release unfulfilled stocks, so they can be bought by other customers. <b>Order will not be refunded when cancelling order - You need to do it manually.</b> Are you sure you want to cancel this order?"
values={{
b: (...chunks) => <b>{chunks}</b>,
orderNumber
}}
/>
</DialogContentText>
{errors.length > 0 && (
<> <>
<DialogTitle> <FormSpacer />
<FormattedMessage {errors.map(err => (
defaultMessage="Cancel Order" <DialogContentText color="error">
description="dialog header" {getOrderErrorMessage(err, intl)}
id="OrderCancelDialogHeader"
/>
</DialogTitle>
<DialogContent>
<DialogContentText>
<FormattedMessage
defaultMessage="Are you sure you want to cancel order #{orderNumber}?"
values={{
orderNumber
}}
/>
<ControlledCheckbox
checked={data.restock}
label={intl.formatMessage({
defaultMessage: "Release all stock allocated to this order",
description: "switch button"
})}
name="restock"
onChange={change}
/>
</DialogContentText> </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}
className={classes.deleteButton}
variant="contained"
type="submit"
>
<FormattedMessage
defaultMessage="Cancel Order"
description="button"
id="OrderCancelDialogButton"
/>
</ConfirmButton>
</DialogActions>
</> </>
)} )}
</Form> </DialogContent>
<DialogActions>
<Button onClick={onClose}>
<FormattedMessage {...buttonMessages.back} />
</Button>
<ConfirmButton
onClick={onSubmit}
transitionState={confirmButtonState}
variant="contained"
type="submit"
>
<FormattedMessage {...buttonMessages.accept} />
</ConfirmButton>
</DialogActions>
</Dialog> </Dialog>
); );
}; };

57
src/orders/components/OrderCannotCancelOrderDialog/OrderCannotCancelOrderDialog.tsx Normal file
View file

@ -0,0 +1,57 @@
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/makeStyles";
import React from "react";
import { FormattedMessage } from "react-intl";
import { buttonMessages } from "@saleor/intl";
import { DialogProps } from "@saleor/types";
const useStyles = makeStyles(
theme => ({
button: {
backgroundColor: theme.palette.error.main
}
}),
{
name: "OrderCannotCancelOrderDialog"
}
);
const OrderCannotCancelOrderDialog: React.FC<DialogProps> = ({
open,
onClose
}) => {
const classes = useStyles({});
return (
<Dialog onClose={onClose} open={open} maxWidth="sm">
<DialogTitle>
<FormattedMessage
defaultMessage="Saleor couldn’t cancel order"
description="dialog header"
/>
</DialogTitle>
<DialogContent>
<DialogContentText>
<FormattedMessage defaultMessage="There are still fulfillments created for this order. Cancel the fulfillments first before you cancel the order." />
</DialogContentText>
</DialogContent>
<DialogActions>
<Button
variant="contained"
className={classes.button}
onClick={onClose}
>
<FormattedMessage {...buttonMessages.ok} />
</Button>
</DialogActions>
</Dialog>
);
};
OrderCannotCancelOrderDialog.displayName = "OrderCannotCancelOrderDialog";
export default OrderCannotCancelOrderDialog;

2
src/orders/components/OrderCannotCancelOrderDialog/index.ts Normal file
View file

@ -0,0 +1,2 @@
export { default } from "./OrderCannotCancelOrderDialog";
export * from "./OrderCannotCancelOrderDialog";

44
src/orders/components/OrderFulfillPage/OrderFulfillPage.stories.tsx Normal file
View file

@ -0,0 +1,44 @@
import { storiesOf } from "@storybook/react";
import React from "react";
import Decorator from "@saleor/storybook/Decorator";
import { warehouseList } from "@saleor/warehouses/fixtures";
import { OrderErrorCode } from "@saleor/types/globalTypes";
import OrderFulfillPage, { OrderFulfillPageProps } from "./OrderFulfillPage";
import { orderToFulfill } from "./fixtures";
const props: OrderFulfillPageProps = {
disabled: false,
errors: [],
onBack: () => undefined,
onSubmit: () => undefined,
order: orderToFulfill,
saveButtonBar: "default",
warehouses: warehouseList
};
storiesOf("Views / Orders / Fulfill order", module)
.addDecorator(Decorator)
.add("default", () => <OrderFulfillPage {...props} />)
.add("loading", () => (
<OrderFulfillPage
{...props}
disabled={true}
order={undefined}
warehouses={undefined}
/>
))
.add("error", () => (
<OrderFulfillPage
{...props}
errors={[
{
__typename: "OrderError",
code: OrderErrorCode.INSUFFICIENT_STOCK,
field: null,
orderLine: orderToFulfill.lines[0].id,
warehouse: warehouseList[0].id
}
]}
/>
));

413
src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx Normal file
View file

@ -0,0 +1,413 @@
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import Card from "@material-ui/core/Card";
import CardActions from "@material-ui/core/CardActions";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import TextField from "@material-ui/core/TextField";
import classNames from "classnames";
import Typography from "@material-ui/core/Typography";
import useFormset, { FormsetData } from "@saleor/hooks/useFormset";
import {
OrderFulfillStockInput,
OrderErrorCode
} from "@saleor/types/globalTypes";
import { WarehouseFragment } from "@saleor/warehouses/types/WarehouseFragment";
import TableCellAvatar from "@saleor/components/TableCellAvatar";
import Container from "@saleor/components/Container";
import PageHeader from "@saleor/components/PageHeader";
import SaveButtonBar from "@saleor/components/SaveButtonBar";
import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
import Form from "@saleor/components/Form";
import {
OrderFulfillData_order,
OrderFulfillData_order_lines
} from "@saleor/orders/types/OrderFulfillData";
import CardTitle from "@saleor/components/CardTitle";
import ResponsiveTable from "@saleor/components/ResponsiveTable";
import makeStyles from "@material-ui/core/styles/makeStyles";
import { update } from "@saleor/utils/lists";
import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
import { renderCollection } from "@saleor/misc";
import Skeleton from "@saleor/components/Skeleton";
import AppHeader from "@saleor/components/AppHeader";
import { FulfillOrder_orderFulfill_errors } from "@saleor/orders/types/FulfillOrder";
const useStyles = makeStyles(
theme => ({
actionBar: {
flexDirection: "row",
paddingLeft: theme.spacing(2) + 2
},
colName: {
width: 250
},
colQuantity: {
width: 210
},
colQuantityContent: {
alignItems: "center",
display: "inline-flex"
},
colQuantityHeader: {
textAlign: "right"
},
colQuantityTotal: {
textAlign: "right",
width: 180
},
colSku: {
textAlign: "right",
width: 150
},
error: {
color: theme.palette.error.main
},
full: {
fontWeight: 600
},
quantityInnerInput: {
padding: "16px 0 14px 12px"
},
quantityInput: {
width: 100
},
remainingQuantity: {
marginLeft: theme.spacing()
},
table: {
"&&": {
tableLayout: "fixed"
}
}
}),
{ name: "OrderFulfillPage" }
);
interface OrderFulfillFormData {
sendInfo: boolean;
}
interface OrderFulfillSubmitData extends OrderFulfillFormData {
items: FormsetData<null, OrderFulfillStockInput[]>;
}
export interface OrderFulfillPageProps {
disabled: boolean;
errors: FulfillOrder_orderFulfill_errors[];
order: OrderFulfillData_order;
saveButtonBar: ConfirmButtonTransitionState;
warehouses: WarehouseFragment[];
onBack: () => void;
onSubmit: (data: OrderFulfillSubmitData) => void;
}
const initialFormData: OrderFulfillFormData = {
sendInfo: true
};
function getRemainingQuantity(line: OrderFulfillData_order_lines): number {
return line.quantity - line.quantityFulfilled;
}
const OrderFulfillPage: React.FC<OrderFulfillPageProps> = ({
disabled,
errors,
order,
saveButtonBar,
warehouses,
onBack,
onSubmit
}) => {
const intl = useIntl();
const classes = useStyles({});
const { change: formsetChange, data: formsetData } = useFormset<
null,
OrderFulfillStockInput[]
>(
order?.lines
.filter(line => getRemainingQuantity(line) > 0)
.map(line => ({
data: null,
id: line.id,
label: line.variant.attributes
.map(attribute =>
attribute.values
.map(attributeValue => attributeValue.name)
.join(" , ")
)
.join(" / "),
value: line.variant.stocks.map(stock => ({
quantity: 0,
warehouse: stock.warehouse.id
}))
}))
);
const handleSubmit = (formData: OrderFulfillFormData) =>
onSubmit({
...formData,
items: formsetData
});
return (
<Container>
<AppHeader onBack={onBack}>
{order?.number
? intl.formatMessage(
{
defaultMessage: "Order #{orderNumber}",
description: "page header with order number"
},
{
orderNumber: order.number
}
)
: intl.formatMessage({
defaultMessage: "Order",
description: "page header"
})}
</AppHeader>
<PageHeader
title={intl.formatMessage(
{
defaultMessage: "Order no. {orderNumber} - Add Fulfillment",
description: "page header"
},
{
orderNumber: order?.number
}
)}
/>
<Form initial={initialFormData} onSubmit={handleSubmit}>
{({ change, data, submit }) => (
<>
<Card>
<CardTitle
title={intl.formatMessage({
defaultMessage: "Items ready to ship",
description: "header"
})}
/>
<ResponsiveTable className={classes.table}>
<TableHead>
<TableRow>
<TableCell className={classes.colName}>
<FormattedMessage defaultMessage="Product name" />
</TableCell>
<TableCell className={classes.colSku}>
<FormattedMessage
defaultMessage="SKU"
description="product's sku"
/>
</TableCell>
{warehouses?.map(warehouse => (
<TableCell
key={warehouse.id}
className={classNames(
classes.colQuantity,
classes.colQuantityHeader
)}
>
{warehouse.name}
</TableCell>
))}
<TableCell className={classes.colQuantityTotal}>
<FormattedMessage
defaultMessage="Quantity to fulfill"
description="quantity of fulfilled products"
/>
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{renderCollection(
order?.lines.filter(line => getRemainingQuantity(line) > 0),
(line, lineIndex) => {
if (!line) {
return (
<TableRow>
<TableCellAvatar className={classes.colName}>
<Skeleton />
</TableCellAvatar>
<TableCell className={classes.colSku}>
<Skeleton />
</TableCell>
{warehouses?.map(warehouse => (
<TableCell
className={classes.colQuantity}
key={warehouse.id}
>
<Skeleton />
</TableCell>
))}
<TableCell className={classes.colQuantityTotal}>
{" "}
<Skeleton />
</TableCell>
</TableRow>
);
}
const remainingQuantity = getRemainingQuantity(line);
const quantityToFulfill = formsetData[
lineIndex
].value.reduce(
(quantityToFulfill, lineInput) =>
quantityToFulfill + (lineInput.quantity || 0),
0
);
const overfulfill = remainingQuantity < quantityToFulfill;
return (
<TableRow key={line.id}>
<TableCellAvatar
className={classes.colName}
thumbnail={line?.thumbnail?.url}
>
{line.productName}
<Typography color="textSecondary" variant="caption">
{line.variant.attributes
.map(attribute =>
attribute.values
.map(attributeValue => attributeValue.name)
.join(", ")
)
.join(" / ")}
</Typography>
</TableCellAvatar>
<TableCell className={classes.colSku}>
{line.variant.sku}
</TableCell>
{warehouses?.map(warehouse => {
const warehouseStock = line.variant.stocks.find(
stock => stock.warehouse.id === warehouse.id
);
const formsetStock = formsetData[
lineIndex
].value.find(
line => line.warehouse === warehouse.id
);
if (!warehouseStock) {
return (
<TableCell
className={classNames(
classes.colQuantity,
classes.error
)}
>
<FormattedMessage
defaultMessage="No Stock"
description="no variant stock in warehouse"
/>
</TableCell>
);
}
const availableQuantity =
warehouseStock.quantity -
warehouseStock.quantityAllocated;
return (
<TableCell className={classes.colQuantity}>
<div className={classes.colQuantityContent}>
<TextField
type="number"
inputProps={{
className: classes.quantityInnerInput,
max: warehouseStock.quantity,
min: 0,
style: { textAlign: "right" }
}}
className={classes.quantityInput}
value={formsetStock.quantity}
onChange={event =>
formsetChange(
line.id,
update(
{
quantity: parseInt(
event.target.value,
10
),
warehouse: warehouse.id
},
formsetData[lineIndex].value,
(a, b) => a.warehouse === b.warehouse
)
)
}
error={
overfulfill ||
formsetStock.quantity >
availableQuantity ||
!!errors?.find(
err =>
err.warehouse === warehouse.id &&
err.orderLine === line.id &&
err.code ===
OrderErrorCode.INSUFFICIENT_STOCK
)
}
/>
<div className={classes.remainingQuantity}>
/ {availableQuantity}
</div>
</div>
</TableCell>
);
})}
<TableCell className={classes.colQuantityTotal}>
<span
className={classNames({
[classes.error]: overfulfill,
[classes.full]:
remainingQuantity <= quantityToFulfill
})}
>
{quantityToFulfill}
</span>{" "}
/ {remainingQuantity}
</TableCell>
</TableRow>
);
}
)}
</TableBody>
</ResponsiveTable>
<CardActions className={classes.actionBar}>
<ControlledCheckbox
checked={data.sendInfo}
label={intl.formatMessage({
defaultMessage: "Send shipment details to customer",
description: "checkbox"
})}
name="sendInfo"
onChange={change}
/>
</CardActions>
</Card>
<SaveButtonBar
disabled={disabled}
labels={{
save: intl.formatMessage({
defaultMessage: "Fulfill",
description: "fulfill order, button"
})
}}
state={saveButtonBar}
onSave={submit}
onCancel={onBack}
/>
</>
)}
</Form>
</Container>
);
};
OrderFulfillPage.displayName = "OrderFulfillPage";
export default OrderFulfillPage;

172
src/orders/components/OrderFulfillPage/fixtures.ts Normal file
View file

@ -0,0 +1,172 @@
/* eslint-disable sort-keys */
import { OrderFulfillData_order } from "@saleor/orders/types/OrderFulfillData";
import { warehouseList } from "@saleor/warehouses/fixtures";
import * as placeholderImage from "@assets/images/sample-product.jpg";
export const orderToFulfill: OrderFulfillData_order = {
__typename: "Order",
id: "T3JkZXI6Mg==",
lines: [
{
__typename: "OrderLine",
id: "T3JkZXJMaW5lOjQ=",
isShippingRequired: true,
productName: "T-Shirt",
quantity: 3,
quantityFulfilled: 1,
variant: {
__typename: "ProductVariant",
id: "UHJvZHVjdFZhcmlhbnQ6Mjk2",
name: "S",
sku: "62783187",
attributes: [
{
__typename: "SelectedAttribute",
values: [
{
__typename: "AttributeValue",
id: "QXR0cmlidXRlVmFsdWU6MzY=",
name: "S"
}
]
}
],
stocks: [
{
__typename: "Stock",
id: "U3RvY2s6NTIy",
warehouse: warehouseList[0],
quantity: 1217,
quantityAllocated: 10
},
{
__typename: "Stock",
id: "U3RvY2s6NTIx",
warehouse: warehouseList[1],
quantity: 1217,
quantityAllocated: 20
},
{
__typename: "Stock",
id: "U3RvY2s6NTIz",
warehouse: warehouseList[2],
quantity: 1217,
quantityAllocated: 4
},
{
__typename: "Stock",
id: "U3RvY2s6NTI0",
warehouse: warehouseList[3],
quantity: 1220,
quantityAllocated: 7
}
]
},
thumbnail: {
__typename: "Image",
url: placeholderImage
}
},
{
__typename: "OrderLine",
id: "T3JkZXJMaW5lOjU=",
isShippingRequired: true,
productName: "Lemon Juice",
quantity: 4,
quantityFulfilled: 0,
variant: {
__typename: "ProductVariant",
id: "UHJvZHVjdFZhcmlhbnQ6MTgx",
name: "2.5l",
sku: "998323583",
attributes: [
{
__typename: "SelectedAttribute",
values: [
{
__typename: "AttributeValue",
id: "QXR0cmlidXRlVmFsdWU6NjE=",
name: "2.5l"
}
]
}
],
stocks: [
{
__typename: "Stock",
id: "U3RvY2s6NTI=",
warehouse: warehouseList[1],
quantity: 760,
quantityAllocated: 2
},
{
__typename: "Stock",
id: "U3RvY2s6NTE=",
warehouse: warehouseList[2],
quantity: 760,
quantityAllocated: 33
},
{
__typename: "Stock",
id: "U3RvY2s6NTM=",
warehouse: warehouseList[3],
quantity: 760,
quantityAllocated: 4
}
]
},
thumbnail: {
__typename: "Image",
url: placeholderImage
}
},
{
__typename: "OrderLine",
id: "T3JkZXJMaW5lOjY=",
isShippingRequired: true,
productName: "Orange Juice",
quantity: 3,
quantityFulfilled: 2,
variant: {
__typename: "ProductVariant",
id: "UHJvZHVjdFZhcmlhbnQ6MTgy",
name: "5l",
sku: "998323584",
attributes: [
{
__typename: "SelectedAttribute",
values: [
{
__typename: "AttributeValue",
id: "QXR0cmlidXRlVmFsdWU6NjI=",
name: "5l"
}
]
}
],
stocks: [
{
__typename: "Stock",
id: "U3RvY2s6NTc=",
warehouse: warehouseList[0],
quantity: 587,
quantityAllocated: 0
},
{
__typename: "Stock",
id: "U3RvY2s6NTY=",
warehouse: warehouseList[2],
quantity: 587,
quantityAllocated: 1
}
]
},
thumbnail: {
__typename: "Image",
url: placeholderImage
}
}
],
number: "9123"
};

2
src/orders/components/OrderFulfillPage/index.ts Normal file
View file

@ -0,0 +1,2 @@
export * from "./OrderFulfillPage";
export { default } from "./OrderFulfillPage";

66
src/orders/components/OrderFulfillment/OrderFulfillment.tsx
View file

@ -9,6 +9,7 @@ import TableRow from "@material-ui/core/TableRow";
import Typography from "@material-ui/core/Typography"; import Typography from "@material-ui/core/Typography";
import React from "react"; import React from "react";
import { FormattedMessage, useIntl } from "react-intl"; import { FormattedMessage, useIntl } from "react-intl";
import classNames from "classnames";
import CardMenu from "@saleor/components/CardMenu"; import CardMenu from "@saleor/components/CardMenu";
import CardTitle from "@saleor/components/CardTitle"; import CardTitle from "@saleor/components/CardTitle";
@ -19,7 +20,7 @@ import StatusLabel from "@saleor/components/StatusLabel";
import TableCellAvatar, { import TableCellAvatar, {
AVATAR_MARGIN AVATAR_MARGIN
} from "@saleor/components/TableCellAvatar"; } from "@saleor/components/TableCellAvatar";
import { maybe, renderCollection } from "../../../misc"; import { maybe, renderCollection, getStringOrPlaceholder } from "../../../misc";
import { FulfillmentStatus } from "../../../types/globalTypes"; import { FulfillmentStatus } from "../../../types/globalTypes";
import { OrderDetails_order_fulfillments } from "../../types/OrderDetails"; import { OrderDetails_order_fulfillments } from "../../types/OrderDetails";
@ -46,7 +47,15 @@ const useStyles = makeStyles(
textAlign: "right", textAlign: "right",
width: 120 width: 120
}, },
infoLabel: {
display: "inline-block"
},
infoLabelWithMargin: {
marginBottom: theme.spacing()
},
infoRow: {
padding: theme.spacing(2, 3)
},
orderNumber: { orderNumber: {
display: "inline", display: "inline",
marginLeft: theme.spacing(1) marginLeft: theme.spacing(1)
@ -68,7 +77,7 @@ interface OrderFulfillmentProps {
onTrackingCodeAdd: () => void; onTrackingCodeAdd: () => void;
} }
const numberOfColumns = 3; const numberOfColumns = 4;
const OrderFulfillment: React.FC<OrderFulfillmentProps> = props => { const OrderFulfillment: React.FC<OrderFulfillmentProps> = props => {
const { const {
@ -107,8 +116,8 @@ const OrderFulfillment: React.FC<OrderFulfillmentProps> = props => {
) )
: intl.formatMessage( : intl.formatMessage(
{ {
defaultMessage: "Fulfilled ({quantity})", defaultMessage: "Cancelled ({quantity})",
description: "section header" description: "cancelled fulfillment, section header"
}, },
{ {
quantity quantity
@ -135,7 +144,7 @@ const OrderFulfillment: React.FC<OrderFulfillmentProps> = props => {
menuItems={[ menuItems={[
{ {
label: intl.formatMessage({ label: intl.formatMessage({
defaultMessage: "Cancel shipment", defaultMessage: "Cancel Fulfillment",
description: "button" description: "button"
}), }),
onSelect: onOrderFulfillmentCancel onSelect: onOrderFulfillmentCancel
@ -216,18 +225,47 @@ const OrderFulfillment: React.FC<OrderFulfillmentProps> = props => {
</TableCell> </TableCell>
</TableRow> </TableRow>
))} ))}
{maybe(() => fulfillment.trackingNumber) && ( <TableRow>
<TableRow> <TableCell className={classes.infoRow} colSpan={numberOfColumns}>
<TableCell colSpan={numberOfColumns}> <Typography color="textSecondary" variant="body2">
<FormattedMessage <FormattedMessage
defaultMessage="Tracking Number: {trackingNumber}" defaultMessage="Fulfilled from: {warehouseName}"
description="fulfillment group"
values={{ values={{
trackingNumber: fulfillment.trackingNumber warehouseName: (
<Typography
className={classNames(classes.infoLabel, {
[classes.infoLabelWithMargin]: !!fulfillment?.trackingNumber
})}
color="textPrimary"
variant="body2"
>
{getStringOrPlaceholder(fulfillment?.warehouse?.name)}
</Typography>
)
}} }}
/> />
</TableCell> </Typography>
</TableRow> <Typography color="textSecondary" variant="body2">
)} {fulfillment?.trackingNumber && (
<FormattedMessage
defaultMessage="Tracking Number: {trackingNumber}"
values={{
trackingNumber: (
<Typography
className={classes.infoLabel}
color="textPrimary"
variant="body2"
>
{fulfillment.trackingNumber}
</Typography>
)
}}
/>
)}
</Typography>
</TableCell>
</TableRow>
</TableBody> </TableBody>
</ResponsiveTable> </ResponsiveTable>
{status === FulfillmentStatus.FULFILLED && !fulfillment.trackingNumber && ( {status === FulfillmentStatus.FULFILLED && !fulfillment.trackingNumber && (

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

@ -11,25 +11,29 @@ import { FormattedMessage, useIntl } from "react-intl";
import ConfirmButton, { import ConfirmButton, {
ConfirmButtonTransitionState ConfirmButtonTransitionState
} from "@saleor/components/ConfirmButton"; } from "@saleor/components/ConfirmButton";
import { ControlledCheckbox } from "@saleor/components/ControlledCheckbox";
import Form from "@saleor/components/Form"; import Form from "@saleor/components/Form";
import { buttonMessages } from "@saleor/intl"; import { buttonMessages } from "@saleor/intl";
import { OrderErrorFragment } from "@saleor/orders/types/OrderErrorFragment"; import { OrderErrorFragment } from "@saleor/orders/types/OrderErrorFragment";
import FormSpacer from "@saleor/components/FormSpacer"; import FormSpacer from "@saleor/components/FormSpacer";
import getOrderErrorMessage from "@saleor/utils/errors/order"; import getOrderErrorMessage from "@saleor/utils/errors/order";
import { WarehouseFragment } from "@saleor/warehouses/types/WarehouseFragment";
import SingleAutocompleteSelectField from "@saleor/components/SingleAutocompleteSelectField";
import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
export interface FormData { export interface OrderFulfillmentCancelDialogFormData {
restock: boolean; warehouseId: string;
} }
const useStyles = makeStyles( const useStyles = makeStyles(
theme => ({ theme => ({
deleteButton: { enableOverflow: {
"&:hover": { overflow: "visible"
backgroundColor: theme.palette.error.main },
}, paragraph: {
backgroundColor: theme.palette.error.main, marginBottom: theme.spacing(2)
color: theme.palette.error.contrastText },
selectCcontainer: {
width: "60%"
} }
}), }),
{ name: "OrderFulfillmentCancelDialog" } { name: "OrderFulfillmentCancelDialog" }
@ -39,69 +43,99 @@ export interface OrderFulfillmentCancelDialogProps {
confirmButtonState: ConfirmButtonTransitionState; confirmButtonState: ConfirmButtonTransitionState;
errors: OrderErrorFragment[]; errors: OrderErrorFragment[];
open: boolean; open: boolean;
warehouses: WarehouseFragment[];
onClose(); onClose();
onConfirm(data: FormData); onConfirm(data: OrderFulfillmentCancelDialogFormData);
} }
const OrderFulfillmentCancelDialog: React.FC<OrderFulfillmentCancelDialogProps> = props => { const OrderFulfillmentCancelDialog: React.FC<OrderFulfillmentCancelDialogProps> = props => {
const { confirmButtonState, errors, open, onConfirm, onClose } = props; const {
confirmButtonState,
errors,
open,
warehouses,
onConfirm,
onClose
} = props;
const classes = useStyles(props); const classes = useStyles(props);
const intl = useIntl(); const intl = useIntl();
const [displayValue, setDisplayValue] = React.useState("");
const choices = warehouses?.map(warehouse => ({
label: warehouse.name,
value: warehouse.id
}));
return ( return (
<Dialog onClose={onClose} open={open} fullWidth maxWidth="xs"> <Dialog
<Form initial={{ restock: true }} onSubmit={onConfirm}> classes={{
{({ change, data, submit }) => ( paper: classes.enableOverflow
<> }}
<DialogTitle> onClose={onClose}
<FormattedMessage open={open}
defaultMessage="Cancel Fulfillment" fullWidth
description="dialog header" maxWidth="sm"
/> >
</DialogTitle> <Form initial={{ warehouseId: null }} onSubmit={onConfirm}>
<DialogContent> {({ change, data: formData, submit }) => {
<DialogContentText> const handleChange = createSingleAutocompleteSelectHandler(
<FormattedMessage defaultMessage="Are you sure you want to cancel this fulfillment?" /> change,
</DialogContentText> setDisplayValue,
<ControlledCheckbox choices
checked={data.restock} );
label={intl.formatMessage({ return (
defaultMessage: "Restock items?", <>
description: "switch button" <DialogTitle>
})}
name="restock"
onChange={change}
/>
{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}
className={classes.deleteButton}
variant="contained"
onClick={submit}
>
<FormattedMessage <FormattedMessage
defaultMessage="Cancel fulfillment" defaultMessage="Cancel Fulfillment"
description="button" description="dialog header"
/> />
</ConfirmButton> </DialogTitle>
</DialogActions> <DialogContent className={classes.enableOverflow}>
</> <DialogContentText className={classes.paragraph}>
)} <FormattedMessage defaultMessage="Are you sure you want to cancel fulfillment? Canceling a fulfillment will restock products at a selected warehouse." />
</DialogContentText>
<div className={classes.selectCcontainer}>
<SingleAutocompleteSelectField
choices={choices}
displayValue={displayValue}
label={intl.formatMessage({
defaultMessage: "Select Warehouse",
description: "select warehouse to restock items"
})}
name="warehouseId"
value={formData.warehouseId}
onChange={handleChange}
/>
</div>
{errors.length > 0 && (
<>
<FormSpacer />
{errors.map(err => (
<DialogContentText color="error">
{getOrderErrorMessage(err, intl)}
</DialogContentText>
))}
</>
)}
</DialogContent>
<DialogActions>
<Button onClick={onClose}>
<FormattedMessage {...buttonMessages.back} />
</Button>
<ConfirmButton
disabled={formData.warehouseId === null}
transitionState={confirmButtonState}
variant="contained"
onClick={submit}
>
<FormattedMessage {...buttonMessages.accept} />
</ConfirmButton>
</DialogActions>
</>
);
}}
</Form> </Form>
</Dialog> </Dialog>
); );

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

@ -54,7 +54,7 @@ const useStyles = makeStyles(
width: 120 width: 120
}, },
quantityInput: { quantityInput: {
width: "4rem" width: 100
}, },
remainingQuantity: { remainingQuantity: {
marginLeft: theme.spacing(), marginLeft: theme.spacing(),

163
src/orders/components/OrderList/OrderList.tsx
View file

@ -3,16 +3,15 @@ import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell"; import TableCell from "@material-ui/core/TableCell";
import TableFooter from "@material-ui/core/TableFooter"; import TableFooter from "@material-ui/core/TableFooter";
import TableRow from "@material-ui/core/TableRow"; import TableRow from "@material-ui/core/TableRow";
import TableHead from "@material-ui/core/TableHead";
import React from "react"; import React from "react";
import { FormattedMessage, useIntl } from "react-intl"; import { FormattedMessage, useIntl } from "react-intl";
import Checkbox from "@saleor/components/Checkbox";
import { DateTime } from "@saleor/components/Date"; import { DateTime } from "@saleor/components/Date";
import Money from "@saleor/components/Money"; import Money from "@saleor/components/Money";
import ResponsiveTable from "@saleor/components/ResponsiveTable"; import ResponsiveTable from "@saleor/components/ResponsiveTable";
import Skeleton from "@saleor/components/Skeleton"; import Skeleton from "@saleor/components/Skeleton";
import StatusLabel from "@saleor/components/StatusLabel"; import StatusLabel from "@saleor/components/StatusLabel";
import TableHead from "@saleor/components/TableHead";
import TablePagination from "@saleor/components/TablePagination"; import TablePagination from "@saleor/components/TablePagination";
import { import {
maybe, maybe,
@ -20,7 +19,7 @@ import {
transformOrderStatus, transformOrderStatus,
transformPaymentStatus transformPaymentStatus
} from "@saleor/misc"; } from "@saleor/misc";
import { ListActions, ListProps, SortPage } from "@saleor/types"; import { ListProps, SortPage } from "@saleor/types";
import { OrderListUrlSortField } from "@saleor/orders/urls"; import { OrderListUrlSortField } from "@saleor/orders/urls";
import TableCellHeader from "@saleor/components/TableCellHeader"; import TableCellHeader from "@saleor/components/TableCellHeader";
import { getArrowDirection } from "@saleor/utils/sort"; import { getArrowDirection } from "@saleor/utils/sort";
@ -59,14 +58,11 @@ const useStyles = makeStyles(
{ name: "OrderList" } { name: "OrderList" }
); );
interface OrderListProps interface OrderListProps extends ListProps, SortPage<OrderListUrlSortField> {
extends ListProps,
ListActions,
SortPage<OrderListUrlSortField> {
orders: OrderList_orders_edges_node[]; orders: OrderList_orders_edges_node[];
} }
const numberOfColumns = 7; const numberOfColumns = 6;
export const OrderList: React.FC<OrderListProps> = props => { export const OrderList: React.FC<OrderListProps> = props => {
const { const {
@ -79,12 +75,7 @@ export const OrderList: React.FC<OrderListProps> = props => {
onUpdateListSettings, onUpdateListSettings,
onRowClick, onRowClick,
onSort, onSort,
isChecked, sort
selected,
sort,
toggle,
toggleAll,
toolbar
} = props; } = props;
const classes = useStyles(props); const classes = useStyles(props);
@ -99,14 +90,7 @@ export const OrderList: React.FC<OrderListProps> = props => {
: undefined; : undefined;
return ( return (
<ResponsiveTable> <ResponsiveTable>
<TableHead <TableHead>
colSpan={numberOfColumns}
selected={selected}
disabled={disabled}
items={orders}
toggleAll={toggleAll}
toolbar={toolbar}
>
<TableCellHeader <TableCellHeader
direction={ direction={
sort.sort === OrderListUrlSortField.number sort.sort === OrderListUrlSortField.number
@ -206,84 +190,67 @@ export const OrderList: React.FC<OrderListProps> = props => {
<TableBody> <TableBody>
{renderCollection( {renderCollection(
orderList, orderList,
order => { order => (
const isSelected = order ? isChecked(order.id) : false; <TableRow
hover={!!order}
return ( className={!!order ? classes.link : undefined}
<TableRow onClick={order ? onRowClick(order.id) : undefined}
hover={!!order} key={order ? order.id : "skeleton"}
className={!!order ? classes.link : undefined} >
onClick={order ? onRowClick(order.id) : undefined} <TableCell className={classes.colNumber}>
key={order ? order.id : "skeleton"} {maybe(() => order.number) ? "#" + order.number : <Skeleton />}
selected={isSelected} </TableCell>
> <TableCell className={classes.colDate}>
<TableCell padding="checkbox"> {maybe(() => order.created) ? (
<Checkbox <DateTime date={order.created} />
checked={isSelected} ) : (
disabled={disabled} <Skeleton />
disableClickPropagation )}
onChange={() => toggle(order.id)} </TableCell>
/> <TableCell className={classes.colCustomer}>
</TableCell> {maybe(() => order.billingAddress) ? (
<TableCell className={classes.colNumber}> <>
{maybe(() => order.number) ? ( {order.billingAddress.firstName}
"#" + order.number &nbsp;
) : ( {order.billingAddress.lastName}
<Skeleton /> </>
)} ) : maybe(() => order.userEmail) !== undefined ? (
</TableCell> order.userEmail
<TableCell className={classes.colDate}> ) : (
{maybe(() => order.created) ? ( <Skeleton />
<DateTime date={order.created} /> )}
) : ( </TableCell>
<Skeleton /> <TableCell className={classes.colPayment}>
)} {maybe(() => order.paymentStatus.status) !== undefined ? (
</TableCell> order.paymentStatus.status === null ? null : (
<TableCell className={classes.colCustomer}>
{maybe(() => order.billingAddress) ? (
<>
{order.billingAddress.firstName}
&nbsp;
{order.billingAddress.lastName}
</>
) : maybe(() => order.userEmail) !== undefined ? (
order.userEmail
) : (
<Skeleton />
)}
</TableCell>
<TableCell className={classes.colPayment}>
{maybe(() => order.paymentStatus.status) !== undefined ? (
order.paymentStatus.status === null ? null : (
<StatusLabel
status={order.paymentStatus.status}
label={order.paymentStatus.localized}
/>
)
) : (
<Skeleton />
)}
</TableCell>
<TableCell className={classes.colFulfillment}>
{maybe(() => order.status) ? (
<StatusLabel <StatusLabel
status={order.status.status} status={order.paymentStatus.status}
label={order.status.localized} label={order.paymentStatus.localized}
/> />
) : ( )
<Skeleton /> ) : (
)} <Skeleton />
</TableCell> )}
<TableCell className={classes.colTotal}> </TableCell>
{maybe(() => order.total.gross) ? ( <TableCell className={classes.colFulfillment}>
<Money money={order.total.gross} /> {maybe(() => order.status) ? (
) : ( <StatusLabel
<Skeleton /> status={order.status.status}
)} label={order.status.localized}
</TableCell> />
</TableRow> ) : (
); <Skeleton />
}, )}
</TableCell>
<TableCell className={classes.colTotal}>
{maybe(() => order.total.gross) ? (
<Money money={order.total.gross} />
) : (
<Skeleton />
)}
</TableCell>
</TableRow>
),
() => ( () => (
<TableRow> <TableRow>
<TableCell colSpan={numberOfColumns}> <TableCell colSpan={numberOfColumns}>

8
src/orders/components/OrderListPage/OrderListPage.tsx
View file

@ -7,12 +7,7 @@ import { FormattedMessage, useIntl } from "react-intl";
import Container from "@saleor/components/Container"; import Container from "@saleor/components/Container";
import PageHeader from "@saleor/components/PageHeader"; import PageHeader from "@saleor/components/PageHeader";
import { sectionNames } from "@saleor/intl"; import { sectionNames } from "@saleor/intl";
import { import { FilterPageProps, PageListProps, SortPage } from "@saleor/types";
FilterPageProps,
ListActions,
PageListProps,
SortPage
} from "@saleor/types";
import { OrderListUrlSortField } from "@saleor/orders/urls"; import { OrderListUrlSortField } from "@saleor/orders/urls";
import FilterBar from "@saleor/components/FilterBar"; import FilterBar from "@saleor/components/FilterBar";
import { OrderList_orders_edges_node } from "../../types/OrderList"; import { OrderList_orders_edges_node } from "../../types/OrderList";
@ -25,7 +20,6 @@ import {
export interface OrderListPageProps export interface OrderListPageProps
extends PageListProps, extends PageListProps,
ListActions,
FilterPageProps<OrderFilterKeys, OrderListFilterOpts>, FilterPageProps<OrderFilterKeys, OrderListFilterOpts>,
SortPage<OrderListUrlSortField> { SortPage<OrderListUrlSortField> {
orders: OrderList_orders_edges_node[]; orders: OrderList_orders_edges_node[];

226
src/orders/containers/OrderOperations.tsx
View file

@ -6,7 +6,6 @@ import {
TypedOrderAddNoteMutation, TypedOrderAddNoteMutation,
TypedOrderCancelMutation, TypedOrderCancelMutation,
TypedOrderCaptureMutation, TypedOrderCaptureMutation,
TypedOrderCreateFulfillmentMutation,
TypedOrderDraftCancelMutation, TypedOrderDraftCancelMutation,
TypedOrderDraftFinalizeMutation, TypedOrderDraftFinalizeMutation,
TypedOrderDraftUpdateMutation, TypedOrderDraftUpdateMutation,
@ -24,10 +23,6 @@ import {
import { OrderAddNote, OrderAddNoteVariables } from "../types/OrderAddNote"; import { OrderAddNote, OrderAddNoteVariables } from "../types/OrderAddNote";
import { OrderCancel, OrderCancelVariables } from "../types/OrderCancel"; import { OrderCancel, OrderCancelVariables } from "../types/OrderCancel";
import { OrderCapture, OrderCaptureVariables } from "../types/OrderCapture"; import { OrderCapture, OrderCaptureVariables } from "../types/OrderCapture";
import {
OrderCreateFulfillment,
OrderCreateFulfillmentVariables
} from "../types/OrderCreateFulfillment";
import { import {
OrderDraftCancel, OrderDraftCancel,
OrderDraftCancelVariables OrderDraftCancelVariables
@ -80,10 +75,6 @@ interface OrderOperationsProps {
OrderCancel, OrderCancel,
OrderCancelVariables OrderCancelVariables
>; >;
orderCreateFulfillment: PartialMutationProviderOutput<
OrderCreateFulfillment,
OrderCreateFulfillmentVariables
>;
orderFulfillmentCancel: PartialMutationProviderOutput< orderFulfillmentCancel: PartialMutationProviderOutput<
OrderFulfillmentCancel, OrderFulfillmentCancel,
OrderFulfillmentCancelVariables OrderFulfillmentCancelVariables
@ -139,7 +130,6 @@ interface OrderOperationsProps {
>; >;
}) => React.ReactNode; }) => React.ReactNode;
onOrderFulfillmentCancel: (data: OrderFulfillmentCancel) => void; onOrderFulfillmentCancel: (data: OrderFulfillmentCancel) => void;
onOrderFulfillmentCreate: (data: OrderCreateFulfillment) => void;
onOrderFulfillmentUpdate: (data: OrderFulfillmentUpdateTracking) => void; onOrderFulfillmentUpdate: (data: OrderFulfillmentUpdateTracking) => void;
onOrderCancel: (data: OrderCancel) => void; onOrderCancel: (data: OrderCancel) => void;
onOrderVoid: (data: OrderVoid) => void; onOrderVoid: (data: OrderVoid) => void;
@ -160,7 +150,6 @@ interface OrderOperationsProps {
const OrderOperations: React.FC<OrderOperationsProps> = ({ const OrderOperations: React.FC<OrderOperationsProps> = ({
children, children,
onDraftUpdate, onDraftUpdate,
onOrderFulfillmentCreate,
onNoteAdd, onNoteAdd,
onOrderCancel, onOrderCancel,
onOrderLinesAdd, onOrderLinesAdd,
@ -185,151 +174,140 @@ const OrderOperations: React.FC<OrderOperationsProps> = ({
{(...paymentCapture) => ( {(...paymentCapture) => (
<TypedOrderRefundMutation onCompleted={onPaymentRefund}> <TypedOrderRefundMutation onCompleted={onPaymentRefund}>
{(...paymentRefund) => ( {(...paymentRefund) => (
<TypedOrderCreateFulfillmentMutation <TypedOrderAddNoteMutation onCompleted={onNoteAdd}>
onCompleted={onOrderFulfillmentCreate} {(...addNote) => (
> <TypedOrderUpdateMutation onCompleted={onUpdate}>
{(...createFulfillment) => ( {(...update) => (
<TypedOrderAddNoteMutation onCompleted={onNoteAdd}> <TypedOrderDraftUpdateMutation
{(...addNote) => ( onCompleted={onDraftUpdate}
<TypedOrderUpdateMutation onCompleted={onUpdate}> >
{(...update) => ( {(...updateDraft) => (
<TypedOrderDraftUpdateMutation <TypedOrderShippingMethodUpdateMutation
onCompleted={onDraftUpdate} onCompleted={onShippingMethodUpdate}
> >
{(...updateDraft) => ( {(...updateShippingMethod) => (
<TypedOrderShippingMethodUpdateMutation <TypedOrderLineDeleteMutation
onCompleted={onShippingMethodUpdate} onCompleted={onOrderLineDelete}
> >
{(...updateShippingMethod) => ( {(...deleteOrderLine) => (
<TypedOrderLineDeleteMutation <TypedOrderLinesAddMutation
onCompleted={onOrderLineDelete} onCompleted={onOrderLinesAdd}
> >
{(...deleteOrderLine) => ( {(...addOrderLine) => (
<TypedOrderLinesAddMutation <TypedOrderLineUpdateMutation
onCompleted={onOrderLinesAdd} onCompleted={onOrderLineUpdate}
> >
{(...addOrderLine) => ( {(...updateOrderLine) => (
<TypedOrderLineUpdateMutation <TypedOrderFulfillmentCancelMutation
onCompleted={onOrderLineUpdate} onCompleted={
onOrderFulfillmentCancel
}
> >
{(...updateOrderLine) => ( {(...cancelFulfillment) => (
<TypedOrderFulfillmentCancelMutation <TypedOrderFulfillmentUpdateTrackingMutation
onCompleted={ onCompleted={
onOrderFulfillmentCancel onOrderFulfillmentUpdate
} }
> >
{(...cancelFulfillment) => ( {(
<TypedOrderFulfillmentUpdateTrackingMutation ...updateTrackingNumber
) => (
<TypedOrderDraftFinalizeMutation
onCompleted={ onCompleted={
onOrderFulfillmentUpdate onDraftFinalize
} }
> >
{( {(...finalizeDraft) => (
...updateTrackingNumber <TypedOrderDraftCancelMutation
) => (
<TypedOrderDraftFinalizeMutation
onCompleted={ onCompleted={
onDraftFinalize onDraftCancel
} }
> >
{( {(
...finalizeDraft ...cancelDraft
) => ( ) => (
<TypedOrderDraftCancelMutation <TypedOrderMarkAsPaidMutation
onCompleted={ onCompleted={
onDraftCancel onOrderMarkAsPaid
} }
> >
{( {(
...cancelDraft ...markAsPaid
) => ( ) =>
<TypedOrderMarkAsPaidMutation children({
onCompleted={ orderAddNote: getMutationProviderData(
onOrderMarkAsPaid ...addNote
} ),
> orderCancel: getMutationProviderData(
{( ...orderCancel
),
orderDraftCancel: getMutationProviderData(
...cancelDraft
),
orderDraftFinalize: getMutationProviderData(
...finalizeDraft
),
orderDraftUpdate: getMutationProviderData(
...updateDraft
),
orderFulfillmentCancel: getMutationProviderData(
...cancelFulfillment
),
orderFulfillmentUpdateTracking: getMutationProviderData(
...updateTrackingNumber
),
orderLineDelete: getMutationProviderData(
...deleteOrderLine
),
orderLineUpdate: getMutationProviderData(
...updateOrderLine
),
orderLinesAdd: getMutationProviderData(
...addOrderLine
),
orderPaymentCapture: getMutationProviderData(
...paymentCapture
),
orderPaymentMarkAsPaid: getMutationProviderData(
...markAsPaid ...markAsPaid
) => ),
children({ orderPaymentRefund: getMutationProviderData(
orderAddNote: getMutationProviderData( ...paymentRefund
...addNote ),
), orderShippingMethodUpdate: getMutationProviderData(
orderCancel: getMutationProviderData( ...updateShippingMethod
...orderCancel ),
), orderUpdate: getMutationProviderData(
orderCreateFulfillment: getMutationProviderData( ...update
...createFulfillment ),
), orderVoid: getMutationProviderData(
orderDraftCancel: getMutationProviderData( ...orderVoid
...cancelDraft )
), })
orderDraftFinalize: getMutationProviderData( }
...finalizeDraft </TypedOrderMarkAsPaidMutation>
),
orderDraftUpdate: getMutationProviderData(
...updateDraft
),
orderFulfillmentCancel: getMutationProviderData(
...cancelFulfillment
),
orderFulfillmentUpdateTracking: getMutationProviderData(
...updateTrackingNumber
),
orderLineDelete: getMutationProviderData(
...deleteOrderLine
),
orderLineUpdate: getMutationProviderData(
...updateOrderLine
),
orderLinesAdd: getMutationProviderData(
...addOrderLine
),
orderPaymentCapture: getMutationProviderData(
...paymentCapture
),
orderPaymentMarkAsPaid: getMutationProviderData(
...markAsPaid
),
orderPaymentRefund: getMutationProviderData(
...paymentRefund
),
orderShippingMethodUpdate: getMutationProviderData(
...updateShippingMethod
),
orderUpdate: getMutationProviderData(
...update
),
orderVoid: getMutationProviderData(
...orderVoid
)
})
}
</TypedOrderMarkAsPaidMutation>
)}
</TypedOrderDraftCancelMutation>
)} )}
</TypedOrderDraftFinalizeMutation> </TypedOrderDraftCancelMutation>
)} )}
</TypedOrderFulfillmentUpdateTrackingMutation> </TypedOrderDraftFinalizeMutation>
)} )}
</TypedOrderFulfillmentCancelMutation> </TypedOrderFulfillmentUpdateTrackingMutation>
)} )}
</TypedOrderLineUpdateMutation> </TypedOrderFulfillmentCancelMutation>
)} )}
</TypedOrderLinesAddMutation> </TypedOrderLineUpdateMutation>
)} )}
</TypedOrderLineDeleteMutation> </TypedOrderLinesAddMutation>
)} )}
</TypedOrderShippingMethodUpdateMutation> </TypedOrderLineDeleteMutation>
)} )}
</TypedOrderDraftUpdateMutation> </TypedOrderShippingMethodUpdateMutation>
)} )}
</TypedOrderUpdateMutation> </TypedOrderDraftUpdateMutation>
)} )}
</TypedOrderAddNoteMutation> </TypedOrderUpdateMutation>
)} )}
</TypedOrderCreateFulfillmentMutation> </TypedOrderAddNoteMutation>
)} )}
</TypedOrderRefundMutation> </TypedOrderRefundMutation>
)} )}

7
src/orders/fixtures.ts
View file

@ -1,5 +1,6 @@
import { SearchCustomers_search_edges_node } from "@saleor/searches/types/SearchCustomers"; import { SearchCustomers_search_edges_node } from "@saleor/searches/types/SearchCustomers";
import { MessageDescriptor } from "react-intl"; import { MessageDescriptor } from "react-intl";
import { warehouseList } from "@saleor/warehouses/fixtures";
import { transformOrderStatus, transformPaymentStatus } from "../misc"; import { transformOrderStatus, transformPaymentStatus } from "../misc";
import { import {
FulfillmentStatus, FulfillmentStatus,
@ -865,7 +866,8 @@ export const order = (placeholder: string): OrderDetails_order => ({
} }
], ],
status: FulfillmentStatus.FULFILLED, status: FulfillmentStatus.FULFILLED,
trackingNumber: "" trackingNumber: "",
warehouse: warehouseList[1]
}, },
{ {
__typename: "Fulfillment", __typename: "Fulfillment",
@ -905,7 +907,8 @@ export const order = (placeholder: string): OrderDetails_order => ({
} }
], ],
status: FulfillmentStatus.FULFILLED, status: FulfillmentStatus.FULFILLED,
trackingNumber: "" trackingNumber: "01nn12399su12nndfsy",
warehouse: warehouseList[0]
} }
], ],
id: "T3JkZXI6OQ==", id: "T3JkZXI6OQ==",

9
src/orders/index.tsx
View file

@ -14,9 +14,11 @@ import {
orderPath, orderPath,
OrderUrlQueryParams, OrderUrlQueryParams,
OrderDraftListUrlSortField, OrderDraftListUrlSortField,
OrderListUrlSortField OrderListUrlSortField,
orderFulfillPath
} from "./urls"; } from "./urls";
import OrderDetailsComponent from "./views/OrderDetails"; import OrderDetailsComponent from "./views/OrderDetails";
import OrderFulfillComponent from "./views/OrderFulfill";
import OrderDraftListComponent from "./views/OrderDraftList"; import OrderDraftListComponent from "./views/OrderDraftList";
import OrderListComponent from "./views/OrderList"; import OrderListComponent from "./views/OrderList";
@ -57,6 +59,10 @@ const OrderDetails: React.FC<RouteComponentProps<any>> = ({
); );
}; };
const OrderFulfill: React.FC<RouteComponentProps<any>> = ({ match }) => (
<OrderFulfillComponent orderId={decodeURIComponent(match.params.id)} />
);
const Component = () => { const Component = () => {
const intl = useIntl(); const intl = useIntl();
@ -66,6 +72,7 @@ const Component = () => {
<Switch> <Switch>
<Route exact path={orderDraftListPath} component={OrderDraftList} /> <Route exact path={orderDraftListPath} component={OrderDraftList} />
<Route exact path={orderListPath} component={OrderList} /> <Route exact path={orderListPath} component={OrderList} />
<Route path={orderFulfillPath(":id")} component={OrderFulfill} />
<Route path={orderPath(":id")} component={OrderDetails} /> <Route path={orderPath(":id")} component={OrderDetails} />
</Switch> </Switch>
</> </>

71
src/orders/mutations.ts
View file

@ -8,20 +8,13 @@ import {
fragmentOrderEvent fragmentOrderEvent
} from "./queries"; } from "./queries";
import { OrderAddNote, OrderAddNoteVariables } from "./types/OrderAddNote"; import { OrderAddNote, OrderAddNoteVariables } from "./types/OrderAddNote";
import {
OrderBulkCancel,
OrderBulkCancelVariables
} from "./types/OrderBulkCancel";
import { OrderCancel, OrderCancelVariables } from "./types/OrderCancel"; import { OrderCancel, OrderCancelVariables } from "./types/OrderCancel";
import { OrderCapture, OrderCaptureVariables } from "./types/OrderCapture"; import { OrderCapture, OrderCaptureVariables } from "./types/OrderCapture";
import {
OrderCreateFulfillment,
OrderCreateFulfillmentVariables
} from "./types/OrderCreateFulfillment";
import { import {
OrderDraftBulkCancel, OrderDraftBulkCancel,
OrderDraftBulkCancelVariables OrderDraftBulkCancelVariables
} from "./types/OrderDraftBulkCancel"; } from "./types/OrderDraftBulkCancel";
import { FulfillOrder, FulfillOrderVariables } from "./types/FulfillOrder";
import { import {
OrderDraftCancel, OrderDraftCancel,
OrderDraftCancelVariables OrderDraftCancelVariables
@ -74,8 +67,8 @@ export const orderErrorFragment = gql`
const orderCancelMutation = gql` const orderCancelMutation = gql`
${fragmentOrderDetails} ${fragmentOrderDetails}
${orderErrorFragment} ${orderErrorFragment}
mutation OrderCancel($id: ID!, $restock: Boolean!) { mutation OrderCancel($id: ID!) {
orderCancel(id: $id, restock: $restock) { orderCancel(id: $id) {
errors: orderErrors { errors: orderErrors {
...OrderErrorFragment ...OrderErrorFragment
} }
@ -90,21 +83,6 @@ export const TypedOrderCancelMutation = TypedMutation<
OrderCancelVariables OrderCancelVariables
>(orderCancelMutation); >(orderCancelMutation);
const orderBulkCancelMutation = gql`
${orderErrorFragment}
mutation OrderBulkCancel($ids: [ID]!, $restock: Boolean!) {
orderBulkCancel(ids: $ids, restock: $restock) {
errors: orderErrors {
...OrderErrorFragment
}
}
}
`;
export const TypedOrderBulkCancelMutation = TypedMutation<
OrderBulkCancel,
OrderBulkCancelVariables
>(orderBulkCancelMutation);
const orderDraftCancelMutation = gql` const orderDraftCancelMutation = gql`
${fragmentOrderDetails} ${fragmentOrderDetails}
${orderErrorFragment} ${orderErrorFragment}
@ -234,28 +212,6 @@ export const TypedOrderCaptureMutation = TypedMutation<
OrderCaptureVariables OrderCaptureVariables
>(orderCaptureMutation); >(orderCaptureMutation);
const orderCreateFulfillmentMutation = gql`
${fragmentOrderDetails}
${orderErrorFragment}
mutation OrderCreateFulfillment(
$order: ID!
$input: FulfillmentCreateInput!
) {
orderFulfillmentCreate(order: $order, input: $input) {
errors: orderErrors {
...OrderErrorFragment
}
order {
...OrderDetailsFragment
}
}
}
`;
export const TypedOrderCreateFulfillmentMutation = TypedMutation<
OrderCreateFulfillment,
OrderCreateFulfillmentVariables
>(orderCreateFulfillmentMutation);
const orderFulfillmentUpdateTrackingMutation = gql` const orderFulfillmentUpdateTrackingMutation = gql`
${fragmentOrderDetails} ${fragmentOrderDetails}
${orderErrorFragment} ${orderErrorFragment}
@ -477,3 +433,24 @@ export const TypedOrderLineUpdateMutation = TypedMutation<
OrderLineUpdate, OrderLineUpdate,
OrderLineUpdateVariables OrderLineUpdateVariables
>(orderLineUpdateMutation); >(orderLineUpdateMutation);
const fulfillOrder = gql`
${fragmentOrderDetails}
${orderErrorFragment}
mutation FulfillOrder($orderId: ID!, $input: OrderFulfillInput!) {
orderFulfill(order: $orderId, input: $input) {
errors: orderErrors {
...OrderErrorFragment
warehouse
orderLine
}
order {
...OrderDetailsFragment
}
}
}
`;
export const useOrderFulfill = makeMutation<
FulfillOrder,
FulfillOrderVariables
>(fulfillOrder);

79
src/orders/queries.ts
View file

@ -13,6 +13,10 @@ import {
SearchOrderVariant as SearchOrderVariantType, SearchOrderVariant as SearchOrderVariantType,
SearchOrderVariantVariables SearchOrderVariantVariables
} from "./types/SearchOrderVariant"; } from "./types/SearchOrderVariant";
import {
OrderFulfillData,
OrderFulfillDataVariables
} from "./types/OrderFulfillData";
export const fragmentOrderEvent = gql` export const fragmentOrderEvent = gql`
fragment OrderEventFragment on OrderEvent { fragment OrderEventFragment on OrderEvent {
@ -73,11 +77,32 @@ export const fragmentOrderLine = gql`
} }
} }
`; `;
export const fulfillmentFragment = gql`
${fragmentOrderLine}
fragment FulfillmentFragment on Fulfillment {
id
lines {
id
quantity
orderLine {
...OrderLineFragment
}
}
fulfillmentOrder
status
trackingNumber
warehouse {
id
name
}
}
`;
export const fragmentOrderDetails = gql` export const fragmentOrderDetails = gql`
${fragmentAddress} ${fragmentAddress}
${fragmentOrderEvent} ${fragmentOrderEvent}
${fragmentOrderLine} ${fragmentOrderLine}
${fulfillmentFragment}
fragment OrderDetailsFragment on Order { fragment OrderDetailsFragment on Order {
id id
billingAddress { billingAddress {
@ -90,17 +115,7 @@ export const fragmentOrderDetails = gql`
...OrderEventFragment ...OrderEventFragment
} }
fulfillments { fulfillments {
id ...FulfillmentFragment
lines {
id
quantity
orderLine {
...OrderLineFragment
}
}
fulfillmentOrder
status
trackingNumber
} }
lines { lines {
...OrderLineFragment ...OrderLineFragment
@ -327,3 +342,45 @@ export const useOrderVariantSearch = makeTopLevelSearch<
SearchOrderVariantType, SearchOrderVariantType,
SearchOrderVariantVariables SearchOrderVariantVariables
>(searchOrderVariant); >(searchOrderVariant);
const orderFulfillData = gql`
query OrderFulfillData($orderId: ID!) {
order(id: $orderId) {
id
lines {
id
isShippingRequired
productName
quantity
quantityFulfilled
variant {
id
name
sku
attributes {
values {
id
name
}
}
stocks {
id
warehouse {
id
}
quantity
quantityAllocated
}
}
thumbnail(size: 64) {
url
}
}
number
}
}
`;
export const useOrderFulfillData = makeQuery<
OrderFulfillData,
OrderFulfillDataVariables
>(orderFulfillData);

291
src/orders/types/FulfillOrder.ts Normal file
View file

@ -0,0 +1,291 @@
/* tslint:disable */
/* eslint-disable */
// This file was automatically generated and should not be edited.
import { OrderFulfillInput, OrderErrorCode, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction } from "./../../types/globalTypes";
// ====================================================
// GraphQL mutation operation: FulfillOrder
// ====================================================
export interface FulfillOrder_orderFulfill_errors {
__typename: "OrderError";
code: OrderErrorCode;
field: string | null;
warehouse: string | null;
orderLine: string | null;
}
export interface FulfillOrder_orderFulfill_order_billingAddress_country {
__typename: "CountryDisplay";
code: string;
country: string;
}
export interface FulfillOrder_orderFulfill_order_billingAddress {
__typename: "Address";
city: string;
cityArea: string;
companyName: string;
country: FulfillOrder_orderFulfill_order_billingAddress_country;
countryArea: string;
firstName: string;
id: string;
lastName: string;
phone: string | null;
postalCode: string;
streetAddress1: string;
streetAddress2: string;
}
export interface FulfillOrder_orderFulfill_order_events_user {
__typename: "User";
id: string;
email: string;
}
export interface FulfillOrder_orderFulfill_order_events {
__typename: "OrderEvent";
id: string;
amount: number | null;
date: any | null;
email: string | null;
emailType: OrderEventsEmailsEnum | null;
message: string | null;
quantity: number | null;
type: OrderEventsEnum | null;
user: FulfillOrder_orderFulfill_order_events_user | null;
}
export interface FulfillOrder_orderFulfill_order_fulfillments_lines_orderLine_unitPrice_gross {
__typename: "Money";
amount: number;
currency: string;
}
export interface FulfillOrder_orderFulfill_order_fulfillments_lines_orderLine_unitPrice_net {
__typename: "Money";
amount: number;
currency: string;
}
export interface FulfillOrder_orderFulfill_order_fulfillments_lines_orderLine_unitPrice {
__typename: "TaxedMoney";
gross: FulfillOrder_orderFulfill_order_fulfillments_lines_orderLine_unitPrice_gross;
net: FulfillOrder_orderFulfill_order_fulfillments_lines_orderLine_unitPrice_net;
}
export interface FulfillOrder_orderFulfill_order_fulfillments_lines_orderLine_thumbnail {
__typename: "Image";
url: string;
}
export interface FulfillOrder_orderFulfill_order_fulfillments_lines_orderLine {
__typename: "OrderLine";
id: string;
isShippingRequired: boolean;
productName: string;
productSku: string;
quantity: number;
quantityFulfilled: number;
unitPrice: FulfillOrder_orderFulfill_order_fulfillments_lines_orderLine_unitPrice | null;
thumbnail: FulfillOrder_orderFulfill_order_fulfillments_lines_orderLine_thumbnail | null;
}
export interface FulfillOrder_orderFulfill_order_fulfillments_lines {
__typename: "FulfillmentLine";
id: string;
quantity: number;
orderLine: FulfillOrder_orderFulfill_order_fulfillments_lines_orderLine | null;
}
export interface FulfillOrder_orderFulfill_order_fulfillments_warehouse {
__typename: "Warehouse";
id: string;
name: string;
}
export interface FulfillOrder_orderFulfill_order_fulfillments {
__typename: "Fulfillment";
id: string;
lines: (FulfillOrder_orderFulfill_order_fulfillments_lines | null)[] | null;
fulfillmentOrder: number;
status: FulfillmentStatus;
trackingNumber: string;
warehouse: FulfillOrder_orderFulfill_order_fulfillments_warehouse | null;
}
export interface FulfillOrder_orderFulfill_order_lines_unitPrice_gross {
__typename: "Money";
amount: number;
currency: string;
}
export interface FulfillOrder_orderFulfill_order_lines_unitPrice_net {
__typename: "Money";
amount: number;
currency: string;
}
export interface FulfillOrder_orderFulfill_order_lines_unitPrice {
__typename: "TaxedMoney";
gross: FulfillOrder_orderFulfill_order_lines_unitPrice_gross;
net: FulfillOrder_orderFulfill_order_lines_unitPrice_net;
}
export interface FulfillOrder_orderFulfill_order_lines_thumbnail {
__typename: "Image";
url: string;
}
export interface FulfillOrder_orderFulfill_order_lines {
__typename: "OrderLine";
id: string;
isShippingRequired: boolean;
productName: string;
productSku: string;
quantity: number;
quantityFulfilled: number;
unitPrice: FulfillOrder_orderFulfill_order_lines_unitPrice | null;
thumbnail: FulfillOrder_orderFulfill_order_lines_thumbnail | null;
}
export interface FulfillOrder_orderFulfill_order_shippingAddress_country {
__typename: "CountryDisplay";
code: string;
country: string;
}
export interface FulfillOrder_orderFulfill_order_shippingAddress {
__typename: "Address";
city: string;
cityArea: string;
companyName: string;
country: FulfillOrder_orderFulfill_order_shippingAddress_country;
countryArea: string;
firstName: string;
id: string;
lastName: string;
phone: string | null;
postalCode: string;
streetAddress1: string;
streetAddress2: string;
}
export interface FulfillOrder_orderFulfill_order_shippingMethod {
__typename: "ShippingMethod";
id: string;
}
export interface FulfillOrder_orderFulfill_order_shippingPrice_gross {
__typename: "Money";
amount: number;
currency: string;
}
export interface FulfillOrder_orderFulfill_order_shippingPrice {
__typename: "TaxedMoney";
gross: FulfillOrder_orderFulfill_order_shippingPrice_gross;
}
export interface FulfillOrder_orderFulfill_order_subtotal_gross {
__typename: "Money";
amount: number;
currency: string;
}
export interface FulfillOrder_orderFulfill_order_subtotal {
__typename: "TaxedMoney";
gross: FulfillOrder_orderFulfill_order_subtotal_gross;
}
export interface FulfillOrder_orderFulfill_order_total_gross {
__typename: "Money";
amount: number;
currency: string;
}
export interface FulfillOrder_orderFulfill_order_total_tax {
__typename: "Money";
amount: number;
currency: string;
}
export interface FulfillOrder_orderFulfill_order_total {
__typename: "TaxedMoney";
gross: FulfillOrder_orderFulfill_order_total_gross;
tax: FulfillOrder_orderFulfill_order_total_tax;
}
export interface FulfillOrder_orderFulfill_order_totalAuthorized {
__typename: "Money";
amount: number;
currency: string;
}
export interface FulfillOrder_orderFulfill_order_totalCaptured {
__typename: "Money";
amount: number;
currency: string;
}
export interface FulfillOrder_orderFulfill_order_user {
__typename: "User";
id: string;
email: string;
}
export interface FulfillOrder_orderFulfill_order_availableShippingMethods_price {
__typename: "Money";
amount: number;
currency: string;
}
export interface FulfillOrder_orderFulfill_order_availableShippingMethods {
__typename: "ShippingMethod";
id: string;
name: string;
price: FulfillOrder_orderFulfill_order_availableShippingMethods_price | null;
}
export interface FulfillOrder_orderFulfill_order {
__typename: "Order";
id: string;
billingAddress: FulfillOrder_orderFulfill_order_billingAddress | null;
canFinalize: boolean;
created: any;
customerNote: string;
events: (FulfillOrder_orderFulfill_order_events | null)[] | null;
fulfillments: (FulfillOrder_orderFulfill_order_fulfillments | null)[];
lines: (FulfillOrder_orderFulfill_order_lines | null)[];
number: string | null;
paymentStatus: PaymentChargeStatusEnum | null;
shippingAddress: FulfillOrder_orderFulfill_order_shippingAddress | null;
shippingMethod: FulfillOrder_orderFulfill_order_shippingMethod | null;
shippingMethodName: string | null;
shippingPrice: FulfillOrder_orderFulfill_order_shippingPrice | null;
status: OrderStatus;
subtotal: FulfillOrder_orderFulfill_order_subtotal | null;
total: FulfillOrder_orderFulfill_order_total | null;
actions: (OrderAction | null)[];
totalAuthorized: FulfillOrder_orderFulfill_order_totalAuthorized | null;
totalCaptured: FulfillOrder_orderFulfill_order_totalCaptured | null;
user: FulfillOrder_orderFulfill_order_user | null;
userEmail: string | null;
availableShippingMethods: (FulfillOrder_orderFulfill_order_availableShippingMethods | null)[] | null;
}
export interface FulfillOrder_orderFulfill {
__typename: "OrderFulfill";
errors: FulfillOrder_orderFulfill_errors[];
order: FulfillOrder_orderFulfill_order | null;
}
export interface FulfillOrder {
orderFulfill: FulfillOrder_orderFulfill | null;
}
export interface FulfillOrderVariables {
orderId: string;
input: OrderFulfillInput;
}

67
src/orders/types/FulfillmentFragment.ts Normal file
View file

@ -0,0 +1,67 @@
/* tslint:disable */
/* eslint-disable */
// This file was automatically generated and should not be edited.
import { FulfillmentStatus } from "./../../types/globalTypes";
// ====================================================
// GraphQL fragment: FulfillmentFragment
// ====================================================
export interface FulfillmentFragment_lines_orderLine_unitPrice_gross {
__typename: "Money";
amount: number;
currency: string;
}
export interface FulfillmentFragment_lines_orderLine_unitPrice_net {
__typename: "Money";
amount: number;
currency: string;
}
export interface FulfillmentFragment_lines_orderLine_unitPrice {
__typename: "TaxedMoney";
gross: FulfillmentFragment_lines_orderLine_unitPrice_gross;
net: FulfillmentFragment_lines_orderLine_unitPrice_net;
}
export interface FulfillmentFragment_lines_orderLine_thumbnail {
__typename: "Image";
url: string;
}
export interface FulfillmentFragment_lines_orderLine {
__typename: "OrderLine";
id: string;
isShippingRequired: boolean;
productName: string;
productSku: string;
quantity: number;
quantityFulfilled: number;
unitPrice: FulfillmentFragment_lines_orderLine_unitPrice | null;
thumbnail: FulfillmentFragment_lines_orderLine_thumbnail | null;
}
export interface FulfillmentFragment_lines {
__typename: "FulfillmentLine";
id: string;
quantity: number;
orderLine: FulfillmentFragment_lines_orderLine | null;
}
export interface FulfillmentFragment_warehouse {
__typename: "Warehouse";
id: string;
name: string;
}
export interface FulfillmentFragment {
__typename: "Fulfillment";
id: string;
lines: (FulfillmentFragment_lines | null)[] | null;
fulfillmentOrder: number;
status: FulfillmentStatus;
trackingNumber: string;
warehouse: FulfillmentFragment_warehouse | null;
}

29
src/orders/types/OrderBulkCancel.ts
View file

@ -1,29 +0,0 @@
/* tslint:disable */
/* eslint-disable */
// This file was automatically generated and should not be edited.
import { OrderErrorCode } from "./../../types/globalTypes";
// ====================================================
// GraphQL mutation operation: OrderBulkCancel
// ====================================================
export interface OrderBulkCancel_orderBulkCancel_errors {
__typename: "OrderError";
code: OrderErrorCode;
field: string | null;
}
export interface OrderBulkCancel_orderBulkCancel {
__typename: "OrderBulkCancel";
errors: OrderBulkCancel_orderBulkCancel_errors[];
}
export interface OrderBulkCancel {
orderBulkCancel: OrderBulkCancel_orderBulkCancel | null;
}
export interface OrderBulkCancelVariables {
ids: (string | null)[];
restock: boolean;
}

8
src/orders/types/OrderCancel.ts
View file

@ -97,6 +97,12 @@ export interface OrderCancel_orderCancel_order_fulfillments_lines {
orderLine: OrderCancel_orderCancel_order_fulfillments_lines_orderLine | null; orderLine: OrderCancel_orderCancel_order_fulfillments_lines_orderLine | null;
} }
export interface OrderCancel_orderCancel_order_fulfillments_warehouse {
__typename: "Warehouse";
id: string;
name: string;
}
export interface OrderCancel_orderCancel_order_fulfillments { export interface OrderCancel_orderCancel_order_fulfillments {
__typename: "Fulfillment"; __typename: "Fulfillment";
id: string; id: string;
@ -104,6 +110,7 @@ export interface OrderCancel_orderCancel_order_fulfillments {
fulfillmentOrder: number; fulfillmentOrder: number;
status: FulfillmentStatus; status: FulfillmentStatus;
trackingNumber: string; trackingNumber: string;
warehouse: OrderCancel_orderCancel_order_fulfillments_warehouse | null;
} }
export interface OrderCancel_orderCancel_order_lines_unitPrice_gross { export interface OrderCancel_orderCancel_order_lines_unitPrice_gross {
@ -278,5 +285,4 @@ export interface OrderCancel {
export interface OrderCancelVariables { export interface OrderCancelVariables {
id: string; id: string;
restock: boolean;
} }

7
src/orders/types/OrderCapture.ts
View file

@ -97,6 +97,12 @@ export interface OrderCapture_orderCapture_order_fulfillments_lines {
orderLine: OrderCapture_orderCapture_order_fulfillments_lines_orderLine | null; orderLine: OrderCapture_orderCapture_order_fulfillments_lines_orderLine | null;
} }
export interface OrderCapture_orderCapture_order_fulfillments_warehouse {
__typename: "Warehouse";
id: string;
name: string;
}
export interface OrderCapture_orderCapture_order_fulfillments { export interface OrderCapture_orderCapture_order_fulfillments {
__typename: "Fulfillment"; __typename: "Fulfillment";
id: string; id: string;
@ -104,6 +110,7 @@ export interface OrderCapture_orderCapture_order_fulfillments {
fulfillmentOrder: number; fulfillmentOrder: number;
status: FulfillmentStatus; status: FulfillmentStatus;
trackingNumber: string; trackingNumber: string;
warehouse: OrderCapture_orderCapture_order_fulfillments_warehouse | null;
} }
export interface OrderCapture_orderCapture_order_lines_unitPrice_gross { export interface OrderCapture_orderCapture_order_lines_unitPrice_gross {

282
src/orders/types/OrderCreateFulfillment.ts
View file

@ -1,282 +0,0 @@
/* tslint:disable */
/* eslint-disable */
// This file was automatically generated and should not be edited.
import { FulfillmentCreateInput, OrderErrorCode, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction } from "./../../types/globalTypes";
// ====================================================
// GraphQL mutation operation: OrderCreateFulfillment
// ====================================================
export interface OrderCreateFulfillment_orderFulfillmentCreate_errors {
__typename: "OrderError";
code: OrderErrorCode;
field: string | null;
}
export interface OrderCreateFulfillment_orderFulfillmentCreate_order_billingAddress_country {
__typename: "CountryDisplay";
code: string;
country: string;
}
export interface OrderCreateFulfillment_orderFulfillmentCreate_order_billingAddress {
__typename: "Address";
city: string;
cityArea: string;
companyName: string;
country: OrderCreateFulfillment_orderFulfillmentCreate_order_billingAddress_country;
countryArea: string;
firstName: string;
id: string;
lastName: string;
phone: string | null;
postalCode: string;
streetAddress1: string;
streetAddress2: string;
}
export interface OrderCreateFulfillment_orderFulfillmentCreate_order_events_user {
__typename: "User";
id: string;
email: string;
}
export interface OrderCreateFulfillment_orderFulfillmentCreate_order_events {
__typename: "OrderEvent";
id: string;
amount: number | null;
date: any | null;
email: string | null;
emailType: OrderEventsEmailsEnum | null;
message: string | null;
quantity: number | null;
type: OrderEventsEnum | null;
user: OrderCreateFulfillment_orderFulfillmentCreate_order_events_user | null;
}
export interface OrderCreateFulfillment_orderFulfillmentCreate_order_fulfillments_lines_orderLine_unitPrice_gross {
__typename: "Money";
amount: number;
currency: string;
}
export interface OrderCreateFulfillment_orderFulfillmentCreate_order_fulfillments_lines_orderLine_unitPrice_net {
__typename: "Money";
amount: number;
currency: string;
}
export interface OrderCreateFulfillment_orderFulfillmentCreate_order_fulfillments_lines_orderLine_unitPrice {
__typename: "TaxedMoney";
gross: OrderCreateFulfillment_orderFulfillmentCreate_order_fulfillments_lines_orderLine_unitPrice_gross;
net: OrderCreateFulfillment_orderFulfillmentCreate_order_fulfillments_lines_orderLine_unitPrice_net;
}
export interface OrderCreateFulfillment_orderFulfillmentCreate_order_fulfillments_lines_orderLine_thumbnail {
__typename: "Image";
url: string;
}
export interface OrderCreateFulfillment_orderFulfillmentCreate_order_fulfillments_lines_orderLine {
__typename: "OrderLine";
id: string;
isShippingRequired: boolean;
productName: string;
productSku: string;
quantity: number;
quantityFulfilled: number;
unitPrice: OrderCreateFulfillment_orderFulfillmentCreate_order_fulfillments_lines_orderLine_unitPrice | null;
thumbnail: OrderCreateFulfillment_orderFulfillmentCreate_order_fulfillments_lines_orderLine_thumbnail | null;
}
export interface OrderCreateFulfillment_orderFulfillmentCreate_order_fulfillments_lines {
__typename: "FulfillmentLine";
id: string;
quantity: number;
orderLine: OrderCreateFulfillment_orderFulfillmentCreate_order_fulfillments_lines_orderLine | null;
}
export interface OrderCreateFulfillment_orderFulfillmentCreate_order_fulfillments {
__typename: "Fulfillment";
id: string;
lines: (OrderCreateFulfillment_orderFulfillmentCreate_order_fulfillments_lines | null)[] | null;
fulfillmentOrder: number;
status: FulfillmentStatus;
trackingNumber: string;
}
export interface OrderCreateFulfillment_orderFulfillmentCreate_order_lines_unitPrice_gross {
__typename: "Money";
amount: number;
currency: string;
}
export interface OrderCreateFulfillment_orderFulfillmentCreate_order_lines_unitPrice_net {
__typename: "Money";
amount: number;
currency: string;
}
export interface OrderCreateFulfillment_orderFulfillmentCreate_order_lines_unitPrice {
__typename: "TaxedMoney";
gross: OrderCreateFulfillment_orderFulfillmentCreate_order_lines_unitPrice_gross;
net: OrderCreateFulfillment_orderFulfillmentCreate_order_lines_unitPrice_net;
}
export interface OrderCreateFulfillment_orderFulfillmentCreate_order_lines_thumbnail {
__typename: "Image";
url: string;
}
export interface OrderCreateFulfillment_orderFulfillmentCreate_order_lines {
__typename: "OrderLine";
id: string;
isShippingRequired: boolean;
productName: string;
productSku: string;
quantity: number;
quantityFulfilled: number;
unitPrice: OrderCreateFulfillment_orderFulfillmentCreate_order_lines_unitPrice | null;
thumbnail: OrderCreateFulfillment_orderFulfillmentCreate_order_lines_thumbnail | null;
}
export interface OrderCreateFulfillment_orderFulfillmentCreate_order_shippingAddress_country {
__typename: "CountryDisplay";
code: string;
country: string;
}
export interface OrderCreateFulfillment_orderFulfillmentCreate_order_shippingAddress {
__typename: "Address";
city: string;
cityArea: string;
companyName: string;
country: OrderCreateFulfillment_orderFulfillmentCreate_order_shippingAddress_country;
countryArea: string;
firstName: string;
id: string;
lastName: string;
phone: string | null;
postalCode: string;
streetAddress1: string;
streetAddress2: string;
}
export interface OrderCreateFulfillment_orderFulfillmentCreate_order_shippingMethod {
__typename: "ShippingMethod";
id: string;
}
export interface OrderCreateFulfillment_orderFulfillmentCreate_order_shippingPrice_gross {
__typename: "Money";
amount: number;
currency: string;
}
export interface OrderCreateFulfillment_orderFulfillmentCreate_order_shippingPrice {
__typename: "TaxedMoney";
gross: OrderCreateFulfillment_orderFulfillmentCreate_order_shippingPrice_gross;
}
export interface OrderCreateFulfillment_orderFulfillmentCreate_order_subtotal_gross {
__typename: "Money";
amount: number;
currency: string;
}
export interface OrderCreateFulfillment_orderFulfillmentCreate_order_subtotal {
__typename: "TaxedMoney";
gross: OrderCreateFulfillment_orderFulfillmentCreate_order_subtotal_gross;
}
export interface OrderCreateFulfillment_orderFulfillmentCreate_order_total_gross {
__typename: "Money";
amount: number;
currency: string;
}
export interface OrderCreateFulfillment_orderFulfillmentCreate_order_total_tax {
__typename: "Money";
amount: number;
currency: string;
}
export interface OrderCreateFulfillment_orderFulfillmentCreate_order_total {
__typename: "TaxedMoney";
gross: OrderCreateFulfillment_orderFulfillmentCreate_order_total_gross;
tax: OrderCreateFulfillment_orderFulfillmentCreate_order_total_tax;
}
export interface OrderCreateFulfillment_orderFulfillmentCreate_order_totalAuthorized {
__typename: "Money";
amount: number;
currency: string;
}
export interface OrderCreateFulfillment_orderFulfillmentCreate_order_totalCaptured {
__typename: "Money";
amount: number;
currency: string;
}
export interface OrderCreateFulfillment_orderFulfillmentCreate_order_user {
__typename: "User";
id: string;
email: string;
}
export interface OrderCreateFulfillment_orderFulfillmentCreate_order_availableShippingMethods_price {
__typename: "Money";
amount: number;
currency: string;
}
export interface OrderCreateFulfillment_orderFulfillmentCreate_order_availableShippingMethods {
__typename: "ShippingMethod";
id: string;
name: string;
price: OrderCreateFulfillment_orderFulfillmentCreate_order_availableShippingMethods_price | null;
}
export interface OrderCreateFulfillment_orderFulfillmentCreate_order {
__typename: "Order";
id: string;
billingAddress: OrderCreateFulfillment_orderFulfillmentCreate_order_billingAddress | null;
canFinalize: boolean;
created: any;
customerNote: string;
events: (OrderCreateFulfillment_orderFulfillmentCreate_order_events | null)[] | null;
fulfillments: (OrderCreateFulfillment_orderFulfillmentCreate_order_fulfillments | null)[];
lines: (OrderCreateFulfillment_orderFulfillmentCreate_order_lines | null)[];
number: string | null;
paymentStatus: PaymentChargeStatusEnum | null;
shippingAddress: OrderCreateFulfillment_orderFulfillmentCreate_order_shippingAddress | null;
shippingMethod: OrderCreateFulfillment_orderFulfillmentCreate_order_shippingMethod | null;
shippingMethodName: string | null;
shippingPrice: OrderCreateFulfillment_orderFulfillmentCreate_order_shippingPrice | null;
status: OrderStatus;
subtotal: OrderCreateFulfillment_orderFulfillmentCreate_order_subtotal | null;
total: OrderCreateFulfillment_orderFulfillmentCreate_order_total | null;
actions: (OrderAction | null)[];
totalAuthorized: OrderCreateFulfillment_orderFulfillmentCreate_order_totalAuthorized | null;
totalCaptured: OrderCreateFulfillment_orderFulfillmentCreate_order_totalCaptured | null;
user: OrderCreateFulfillment_orderFulfillmentCreate_order_user | null;
userEmail: string | null;
availableShippingMethods: (OrderCreateFulfillment_orderFulfillmentCreate_order_availableShippingMethods | null)[] | null;
}
export interface OrderCreateFulfillment_orderFulfillmentCreate {
__typename: "FulfillmentCreate";
errors: OrderCreateFulfillment_orderFulfillmentCreate_errors[];
order: OrderCreateFulfillment_orderFulfillmentCreate_order | null;
}
export interface OrderCreateFulfillment {
orderFulfillmentCreate: OrderCreateFulfillment_orderFulfillmentCreate | null;
}
export interface OrderCreateFulfillmentVariables {
order: string;
input: FulfillmentCreateInput;
}

7
src/orders/types/OrderDetails.ts
View file

@ -91,6 +91,12 @@ export interface OrderDetails_order_fulfillments_lines {
orderLine: OrderDetails_order_fulfillments_lines_orderLine | null; orderLine: OrderDetails_order_fulfillments_lines_orderLine | null;
} }
export interface OrderDetails_order_fulfillments_warehouse {
__typename: "Warehouse";
id: string;
name: string;
}
export interface OrderDetails_order_fulfillments { export interface OrderDetails_order_fulfillments {
__typename: "Fulfillment"; __typename: "Fulfillment";
id: string; id: string;
@ -98,6 +104,7 @@ export interface OrderDetails_order_fulfillments {
fulfillmentOrder: number; fulfillmentOrder: number;
status: FulfillmentStatus; status: FulfillmentStatus;
trackingNumber: string; trackingNumber: string;
warehouse: OrderDetails_order_fulfillments_warehouse | null;
} }
export interface OrderDetails_order_lines_unitPrice_gross { export interface OrderDetails_order_lines_unitPrice_gross {

7
src/orders/types/OrderDetailsFragment.ts
View file

@ -91,6 +91,12 @@ export interface OrderDetailsFragment_fulfillments_lines {
orderLine: OrderDetailsFragment_fulfillments_lines_orderLine | null; orderLine: OrderDetailsFragment_fulfillments_lines_orderLine | null;
} }
export interface OrderDetailsFragment_fulfillments_warehouse {
__typename: "Warehouse";
id: string;
name: string;
}
export interface OrderDetailsFragment_fulfillments { export interface OrderDetailsFragment_fulfillments {
__typename: "Fulfillment"; __typename: "Fulfillment";
id: string; id: string;
@ -98,6 +104,7 @@ export interface OrderDetailsFragment_fulfillments {
fulfillmentOrder: number; fulfillmentOrder: number;
status: FulfillmentStatus; status: FulfillmentStatus;
trackingNumber: string; trackingNumber: string;
warehouse: OrderDetailsFragment_fulfillments_warehouse | null;
} }
export interface OrderDetailsFragment_lines_unitPrice_gross { export interface OrderDetailsFragment_lines_unitPrice_gross {

7
src/orders/types/OrderDraftCancel.ts
View file

@ -97,6 +97,12 @@ export interface OrderDraftCancel_draftOrderDelete_order_fulfillments_lines {
orderLine: OrderDraftCancel_draftOrderDelete_order_fulfillments_lines_orderLine | null; orderLine: OrderDraftCancel_draftOrderDelete_order_fulfillments_lines_orderLine | null;
} }
export interface OrderDraftCancel_draftOrderDelete_order_fulfillments_warehouse {
__typename: "Warehouse";
id: string;
name: string;
}
export interface OrderDraftCancel_draftOrderDelete_order_fulfillments { export interface OrderDraftCancel_draftOrderDelete_order_fulfillments {
__typename: "Fulfillment"; __typename: "Fulfillment";
id: string; id: string;
@ -104,6 +110,7 @@ export interface OrderDraftCancel_draftOrderDelete_order_fulfillments {
fulfillmentOrder: number; fulfillmentOrder: number;
status: FulfillmentStatus; status: FulfillmentStatus;
trackingNumber: string; trackingNumber: string;
warehouse: OrderDraftCancel_draftOrderDelete_order_fulfillments_warehouse | null;
} }
export interface OrderDraftCancel_draftOrderDelete_order_lines_unitPrice_gross { export interface OrderDraftCancel_draftOrderDelete_order_lines_unitPrice_gross {

7
src/orders/types/OrderDraftFinalize.ts
View file

@ -97,6 +97,12 @@ export interface OrderDraftFinalize_draftOrderComplete_order_fulfillments_lines
orderLine: OrderDraftFinalize_draftOrderComplete_order_fulfillments_lines_orderLine | null; orderLine: OrderDraftFinalize_draftOrderComplete_order_fulfillments_lines_orderLine | null;
} }
export interface OrderDraftFinalize_draftOrderComplete_order_fulfillments_warehouse {
__typename: "Warehouse";
id: string;
name: string;
}
export interface OrderDraftFinalize_draftOrderComplete_order_fulfillments { export interface OrderDraftFinalize_draftOrderComplete_order_fulfillments {
__typename: "Fulfillment"; __typename: "Fulfillment";
id: string; id: string;
@ -104,6 +110,7 @@ export interface OrderDraftFinalize_draftOrderComplete_order_fulfillments {
fulfillmentOrder: number; fulfillmentOrder: number;
status: FulfillmentStatus; status: FulfillmentStatus;
trackingNumber: string; trackingNumber: string;
warehouse: OrderDraftFinalize_draftOrderComplete_order_fulfillments_warehouse | null;
} }
export interface OrderDraftFinalize_draftOrderComplete_order_lines_unitPrice_gross { export interface OrderDraftFinalize_draftOrderComplete_order_lines_unitPrice_gross {

7
src/orders/types/OrderDraftUpdate.ts
View file

@ -97,6 +97,12 @@ export interface OrderDraftUpdate_draftOrderUpdate_order_fulfillments_lines {
orderLine: OrderDraftUpdate_draftOrderUpdate_order_fulfillments_lines_orderLine | null; orderLine: OrderDraftUpdate_draftOrderUpdate_order_fulfillments_lines_orderLine | null;
} }
export interface OrderDraftUpdate_draftOrderUpdate_order_fulfillments_warehouse {
__typename: "Warehouse";
id: string;
name: string;
}
export interface OrderDraftUpdate_draftOrderUpdate_order_fulfillments { export interface OrderDraftUpdate_draftOrderUpdate_order_fulfillments {
__typename: "Fulfillment"; __typename: "Fulfillment";
id: string; id: string;
@ -104,6 +110,7 @@ export interface OrderDraftUpdate_draftOrderUpdate_order_fulfillments {
fulfillmentOrder: number; fulfillmentOrder: number;
status: FulfillmentStatus; status: FulfillmentStatus;
trackingNumber: string; trackingNumber: string;
warehouse: OrderDraftUpdate_draftOrderUpdate_order_fulfillments_warehouse | null;
} }
export interface OrderDraftUpdate_draftOrderUpdate_order_lines_unitPrice_gross { export interface OrderDraftUpdate_draftOrderUpdate_order_lines_unitPrice_gross {

71
src/orders/types/OrderFulfillData.ts Normal file
View file

@ -0,0 +1,71 @@
/* tslint:disable */
/* eslint-disable */
// This file was automatically generated and should not be edited.
// ====================================================
// GraphQL query operation: OrderFulfillData
// ====================================================
export interface OrderFulfillData_order_lines_variant_attributes_values {
__typename: "AttributeValue";
id: string;
name: string | null;
}
export interface OrderFulfillData_order_lines_variant_attributes {
__typename: "SelectedAttribute";
values: (OrderFulfillData_order_lines_variant_attributes_values | null)[];
}
export interface OrderFulfillData_order_lines_variant_stocks_warehouse {
__typename: "Warehouse";
id: string;
}
export interface OrderFulfillData_order_lines_variant_stocks {
__typename: "Stock";
id: string;
warehouse: OrderFulfillData_order_lines_variant_stocks_warehouse;
quantity: number;
quantityAllocated: number;
}
export interface OrderFulfillData_order_lines_variant {
__typename: "ProductVariant";
id: string;
name: string;
sku: string;
attributes: OrderFulfillData_order_lines_variant_attributes[];
stocks: (OrderFulfillData_order_lines_variant_stocks | null)[] | null;
}
export interface OrderFulfillData_order_lines_thumbnail {
__typename: "Image";
url: string;
}
export interface OrderFulfillData_order_lines {
__typename: "OrderLine";
id: string;
isShippingRequired: boolean;
productName: string;
quantity: number;
quantityFulfilled: number;
variant: OrderFulfillData_order_lines_variant | null;
thumbnail: OrderFulfillData_order_lines_thumbnail | null;
}
export interface OrderFulfillData_order {
__typename: "Order";
id: string;
lines: (OrderFulfillData_order_lines | null)[];
number: string | null;
}
export interface OrderFulfillData {
order: OrderFulfillData_order | null;
}
export interface OrderFulfillDataVariables {
orderId: string;
}

7
src/orders/types/OrderFulfillmentCancel.ts
View file

@ -97,6 +97,12 @@ export interface OrderFulfillmentCancel_orderFulfillmentCancel_order_fulfillment
orderLine: OrderFulfillmentCancel_orderFulfillmentCancel_order_fulfillments_lines_orderLine | null; orderLine: OrderFulfillmentCancel_orderFulfillmentCancel_order_fulfillments_lines_orderLine | null;
} }
export interface OrderFulfillmentCancel_orderFulfillmentCancel_order_fulfillments_warehouse {
__typename: "Warehouse";
id: string;
name: string;
}
export interface OrderFulfillmentCancel_orderFulfillmentCancel_order_fulfillments { export interface OrderFulfillmentCancel_orderFulfillmentCancel_order_fulfillments {
__typename: "Fulfillment"; __typename: "Fulfillment";
id: string; id: string;
@ -104,6 +110,7 @@ export interface OrderFulfillmentCancel_orderFulfillmentCancel_order_fulfillment
fulfillmentOrder: number; fulfillmentOrder: number;
status: FulfillmentStatus; status: FulfillmentStatus;
trackingNumber: string; trackingNumber: string;
warehouse: OrderFulfillmentCancel_orderFulfillmentCancel_order_fulfillments_warehouse | null;
} }
export interface OrderFulfillmentCancel_orderFulfillmentCancel_order_lines_unitPrice_gross { export interface OrderFulfillmentCancel_orderFulfillmentCancel_order_lines_unitPrice_gross {

7
src/orders/types/OrderFulfillmentUpdateTracking.ts
View file

@ -97,6 +97,12 @@ export interface OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_o
orderLine: OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_fulfillments_lines_orderLine | null; orderLine: OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_fulfillments_lines_orderLine | null;
} }
export interface OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_fulfillments_warehouse {
__typename: "Warehouse";
id: string;
name: string;
}
export interface OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_fulfillments { export interface OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_fulfillments {
__typename: "Fulfillment"; __typename: "Fulfillment";
id: string; id: string;
@ -104,6 +110,7 @@ export interface OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_o
fulfillmentOrder: number; fulfillmentOrder: number;
status: FulfillmentStatus; status: FulfillmentStatus;
trackingNumber: string; trackingNumber: string;
warehouse: OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_fulfillments_warehouse | null;
} }
export interface OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_lines_unitPrice_gross { export interface OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_lines_unitPrice_gross {

7
src/orders/types/OrderLineDelete.ts
View file

@ -97,6 +97,12 @@ export interface OrderLineDelete_draftOrderLineDelete_order_fulfillments_lines {
orderLine: OrderLineDelete_draftOrderLineDelete_order_fulfillments_lines_orderLine | null; orderLine: OrderLineDelete_draftOrderLineDelete_order_fulfillments_lines_orderLine | null;
} }
export interface OrderLineDelete_draftOrderLineDelete_order_fulfillments_warehouse {
__typename: "Warehouse";
id: string;
name: string;
}
export interface OrderLineDelete_draftOrderLineDelete_order_fulfillments { export interface OrderLineDelete_draftOrderLineDelete_order_fulfillments {
__typename: "Fulfillment"; __typename: "Fulfillment";
id: string; id: string;
@ -104,6 +110,7 @@ export interface OrderLineDelete_draftOrderLineDelete_order_fulfillments {
fulfillmentOrder: number; fulfillmentOrder: number;
status: FulfillmentStatus; status: FulfillmentStatus;
trackingNumber: string; trackingNumber: string;
warehouse: OrderLineDelete_draftOrderLineDelete_order_fulfillments_warehouse | null;
} }
export interface OrderLineDelete_draftOrderLineDelete_order_lines_unitPrice_gross { export interface OrderLineDelete_draftOrderLineDelete_order_lines_unitPrice_gross {

7
src/orders/types/OrderLineUpdate.ts
View file

@ -97,6 +97,12 @@ export interface OrderLineUpdate_draftOrderLineUpdate_order_fulfillments_lines {
orderLine: OrderLineUpdate_draftOrderLineUpdate_order_fulfillments_lines_orderLine | null; orderLine: OrderLineUpdate_draftOrderLineUpdate_order_fulfillments_lines_orderLine | null;
} }
export interface OrderLineUpdate_draftOrderLineUpdate_order_fulfillments_warehouse {
__typename: "Warehouse";
id: string;
name: string;
}
export interface OrderLineUpdate_draftOrderLineUpdate_order_fulfillments { export interface OrderLineUpdate_draftOrderLineUpdate_order_fulfillments {
__typename: "Fulfillment"; __typename: "Fulfillment";
id: string; id: string;
@ -104,6 +110,7 @@ export interface OrderLineUpdate_draftOrderLineUpdate_order_fulfillments {
fulfillmentOrder: number; fulfillmentOrder: number;
status: FulfillmentStatus; status: FulfillmentStatus;
trackingNumber: string; trackingNumber: string;
warehouse: OrderLineUpdate_draftOrderLineUpdate_order_fulfillments_warehouse | null;
} }
export interface OrderLineUpdate_draftOrderLineUpdate_order_lines_unitPrice_gross { export interface OrderLineUpdate_draftOrderLineUpdate_order_lines_unitPrice_gross {

7
src/orders/types/OrderLinesAdd.ts
View file

@ -97,6 +97,12 @@ export interface OrderLinesAdd_draftOrderLinesCreate_order_fulfillments_lines {
orderLine: OrderLinesAdd_draftOrderLinesCreate_order_fulfillments_lines_orderLine | null; orderLine: OrderLinesAdd_draftOrderLinesCreate_order_fulfillments_lines_orderLine | null;
} }
export interface OrderLinesAdd_draftOrderLinesCreate_order_fulfillments_warehouse {
__typename: "Warehouse";
id: string;
name: string;
}
export interface OrderLinesAdd_draftOrderLinesCreate_order_fulfillments { export interface OrderLinesAdd_draftOrderLinesCreate_order_fulfillments {
__typename: "Fulfillment"; __typename: "Fulfillment";
id: string; id: string;
@ -104,6 +110,7 @@ export interface OrderLinesAdd_draftOrderLinesCreate_order_fulfillments {
fulfillmentOrder: number; fulfillmentOrder: number;
status: FulfillmentStatus; status: FulfillmentStatus;
trackingNumber: string; trackingNumber: string;
warehouse: OrderLinesAdd_draftOrderLinesCreate_order_fulfillments_warehouse | null;
} }
export interface OrderLinesAdd_draftOrderLinesCreate_order_lines_unitPrice_gross { export interface OrderLinesAdd_draftOrderLinesCreate_order_lines_unitPrice_gross {

7
src/orders/types/OrderMarkAsPaid.ts
View file

@ -97,6 +97,12 @@ export interface OrderMarkAsPaid_orderMarkAsPaid_order_fulfillments_lines {
orderLine: OrderMarkAsPaid_orderMarkAsPaid_order_fulfillments_lines_orderLine | null; orderLine: OrderMarkAsPaid_orderMarkAsPaid_order_fulfillments_lines_orderLine | null;
} }
export interface OrderMarkAsPaid_orderMarkAsPaid_order_fulfillments_warehouse {
__typename: "Warehouse";
id: string;
name: string;
}
export interface OrderMarkAsPaid_orderMarkAsPaid_order_fulfillments { export interface OrderMarkAsPaid_orderMarkAsPaid_order_fulfillments {
__typename: "Fulfillment"; __typename: "Fulfillment";
id: string; id: string;
@ -104,6 +110,7 @@ export interface OrderMarkAsPaid_orderMarkAsPaid_order_fulfillments {
fulfillmentOrder: number; fulfillmentOrder: number;
status: FulfillmentStatus; status: FulfillmentStatus;
trackingNumber: string; trackingNumber: string;
warehouse: OrderMarkAsPaid_orderMarkAsPaid_order_fulfillments_warehouse | null;
} }
export interface OrderMarkAsPaid_orderMarkAsPaid_order_lines_unitPrice_gross { export interface OrderMarkAsPaid_orderMarkAsPaid_order_lines_unitPrice_gross {

7
src/orders/types/OrderRefund.ts
View file

@ -97,6 +97,12 @@ export interface OrderRefund_orderRefund_order_fulfillments_lines {
orderLine: OrderRefund_orderRefund_order_fulfillments_lines_orderLine | null; orderLine: OrderRefund_orderRefund_order_fulfillments_lines_orderLine | null;
} }
export interface OrderRefund_orderRefund_order_fulfillments_warehouse {
__typename: "Warehouse";
id: string;
name: string;
}
export interface OrderRefund_orderRefund_order_fulfillments { export interface OrderRefund_orderRefund_order_fulfillments {
__typename: "Fulfillment"; __typename: "Fulfillment";
id: string; id: string;
@ -104,6 +110,7 @@ export interface OrderRefund_orderRefund_order_fulfillments {
fulfillmentOrder: number; fulfillmentOrder: number;
status: FulfillmentStatus; status: FulfillmentStatus;
trackingNumber: string; trackingNumber: string;
warehouse: OrderRefund_orderRefund_order_fulfillments_warehouse | null;
} }
export interface OrderRefund_orderRefund_order_lines_unitPrice_gross { export interface OrderRefund_orderRefund_order_lines_unitPrice_gross {

7
src/orders/types/OrderVoid.ts
View file

@ -97,6 +97,12 @@ export interface OrderVoid_orderVoid_order_fulfillments_lines {
orderLine: OrderVoid_orderVoid_order_fulfillments_lines_orderLine | null; orderLine: OrderVoid_orderVoid_order_fulfillments_lines_orderLine | null;
} }
export interface OrderVoid_orderVoid_order_fulfillments_warehouse {
__typename: "Warehouse";
id: string;
name: string;
}
export interface OrderVoid_orderVoid_order_fulfillments { export interface OrderVoid_orderVoid_order_fulfillments {
__typename: "Fulfillment"; __typename: "Fulfillment";
id: string; id: string;
@ -104,6 +110,7 @@ export interface OrderVoid_orderVoid_order_fulfillments {
fulfillmentOrder: number; fulfillmentOrder: number;
status: FulfillmentStatus; status: FulfillmentStatus;
trackingNumber: string; trackingNumber: string;
warehouse: OrderVoid_orderVoid_order_fulfillments_warehouse | null;
} }
export interface OrderVoid_orderVoid_order_lines_unitPrice_gross { export interface OrderVoid_orderVoid_order_lines_unitPrice_gross {

6
src/orders/urls.ts
View file

@ -97,10 +97,14 @@ export type OrderUrlDialog =
| "edit-shipping" | "edit-shipping"
| "edit-shipping-address" | "edit-shipping-address"
| "finalize" | "finalize"
| "fulfill"
| "mark-paid" | "mark-paid"
| "refund" | "refund"
| "void"; | "void";
export type OrderUrlQueryParams = Dialog<OrderUrlDialog> & SingleAction; export type OrderUrlQueryParams = Dialog<OrderUrlDialog> & SingleAction;
export const orderUrl = (id: string, params?: OrderUrlQueryParams) => export const orderUrl = (id: string, params?: OrderUrlQueryParams) =>
orderPath(encodeURIComponent(id)) + "?" + stringifyQs(params); orderPath(encodeURIComponent(id)) + "?" + stringifyQs(params);
export const orderFulfillPath = (id: string) =>
urlJoin(orderPath(id), "fulfill");
export const orderFulfillUrl = (id: string) =>
orderFulfillPath(encodeURIComponent(id));

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

@ -7,7 +7,6 @@ import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandl
import { OrderAddNote } from "../../types/OrderAddNote"; import { OrderAddNote } from "../../types/OrderAddNote";
import { OrderCancel } from "../../types/OrderCancel"; import { OrderCancel } from "../../types/OrderCancel";
import { OrderCapture } from "../../types/OrderCapture"; import { OrderCapture } from "../../types/OrderCapture";
import { OrderCreateFulfillment } from "../../types/OrderCreateFulfillment";
import { OrderDraftCancel } from "../../types/OrderDraftCancel"; import { OrderDraftCancel } from "../../types/OrderDraftCancel";
import { OrderDraftFinalize } from "../../types/OrderDraftFinalize"; import { OrderDraftFinalize } from "../../types/OrderDraftFinalize";
import { OrderDraftUpdate } from "../../types/OrderDraftUpdate"; import { OrderDraftUpdate } from "../../types/OrderDraftUpdate";
@ -31,7 +30,6 @@ interface OrderDetailsMessages {
handleNoteAdd: (data: OrderAddNote) => void; handleNoteAdd: (data: OrderAddNote) => void;
handleOrderCancel: (data: OrderCancel) => void; handleOrderCancel: (data: OrderCancel) => void;
handleOrderFulfillmentCancel: (data: OrderFulfillmentCancel) => void; handleOrderFulfillmentCancel: (data: OrderFulfillmentCancel) => void;
handleOrderFulfillmentCreate: (data: OrderCreateFulfillment) => void;
handleOrderFulfillmentUpdate: ( handleOrderFulfillmentUpdate: (
data: OrderFulfillmentUpdateTracking data: OrderFulfillmentUpdateTracking
) => void; ) => void;
@ -86,17 +84,6 @@ export const OrderDetailsMessages: React.FC<OrderDetailsMessages> = ({
closeModal(); closeModal();
} }
}; };
const handleOrderFulfillmentCreate = (data: OrderCreateFulfillment) => {
const errs = data.orderFulfillmentCreate?.errors;
if (errs.length === 0) {
pushMessage({
text: intl.formatMessage({
defaultMessage: "Items successfully fulfilled"
})
});
closeModal();
}
};
const handleOrderMarkAsPaid = (data: OrderMarkAsPaid) => { const handleOrderMarkAsPaid = (data: OrderMarkAsPaid) => {
const errs = data.orderMarkAsPaid?.errors; const errs = data.orderMarkAsPaid?.errors;
if (errs.length === 0) { if (errs.length === 0) {
@ -256,7 +243,6 @@ export const OrderDetailsMessages: React.FC<OrderDetailsMessages> = ({
handleNoteAdd, handleNoteAdd,
handleOrderCancel, handleOrderCancel,
handleOrderFulfillmentCancel, handleOrderFulfillmentCancel,
handleOrderFulfillmentCreate,
handleOrderFulfillmentUpdate, handleOrderFulfillmentUpdate,
handleOrderLineDelete, handleOrderLineDelete,
handleOrderLineUpdate, handleOrderLineUpdate,

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

@ -8,6 +8,8 @@ import useUser from "@saleor/hooks/useUser";
import useCustomerSearch from "@saleor/searches/useCustomerSearch"; import useCustomerSearch from "@saleor/searches/useCustomerSearch";
import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
import NotFoundPage from "@saleor/components/NotFoundPage"; import NotFoundPage from "@saleor/components/NotFoundPage";
import { useWarehouseList } from "@saleor/warehouses/queries";
import OrderCannotCancelOrderDialog from "@saleor/orders/components/OrderCannotCancelOrderDialog";
import { customerUrl } from "../../../customers/urls"; import { customerUrl } from "../../../customers/urls";
import { import {
maybe, maybe,
@ -15,7 +17,7 @@ import {
getStringOrPlaceholder getStringOrPlaceholder
} from "../../../misc"; } from "../../../misc";
import { productUrl } from "../../../products/urls"; import { productUrl } from "../../../products/urls";
import { OrderStatus } from "../../../types/globalTypes"; import { OrderStatus, FulfillmentStatus } from "../../../types/globalTypes";
import OrderAddressEditDialog from "../../components/OrderAddressEditDialog"; import OrderAddressEditDialog from "../../components/OrderAddressEditDialog";
import OrderCancelDialog from "../../components/OrderCancelDialog"; import OrderCancelDialog from "../../components/OrderCancelDialog";
import OrderDetailsPage from "../../components/OrderDetailsPage"; import OrderDetailsPage from "../../components/OrderDetailsPage";
@ -25,7 +27,6 @@ import OrderDraftFinalizeDialog, {
} from "../../components/OrderDraftFinalizeDialog"; } from "../../components/OrderDraftFinalizeDialog";
import OrderDraftPage from "../../components/OrderDraftPage"; import OrderDraftPage from "../../components/OrderDraftPage";
import OrderFulfillmentCancelDialog from "../../components/OrderFulfillmentCancelDialog"; import OrderFulfillmentCancelDialog from "../../components/OrderFulfillmentCancelDialog";
import OrderFulfillmentDialog from "../../components/OrderFulfillmentDialog";
import OrderFulfillmentTrackingDialog from "../../components/OrderFulfillmentTrackingDialog"; import OrderFulfillmentTrackingDialog from "../../components/OrderFulfillmentTrackingDialog";
import OrderMarkAsPaidDialog from "../../components/OrderMarkAsPaidDialog/OrderMarkAsPaidDialog"; import OrderMarkAsPaidDialog from "../../components/OrderMarkAsPaidDialog/OrderMarkAsPaidDialog";
import OrderPaymentDialog from "../../components/OrderPaymentDialog"; import OrderPaymentDialog from "../../components/OrderPaymentDialog";
@ -39,7 +40,8 @@ import {
orderListUrl, orderListUrl,
orderUrl, orderUrl,
OrderUrlQueryParams, OrderUrlQueryParams,
OrderUrlDialog OrderUrlDialog,
orderFulfillUrl
} from "../../urls"; } from "../../urls";
import { OrderDetailsMessages } from "./OrderDetailsMessages"; import { OrderDetailsMessages } from "./OrderDetailsMessages";
@ -95,6 +97,12 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
} = useOrderVariantSearch({ } = useOrderVariantSearch({
variables: DEFAULT_INITIAL_SEARCH_DATA variables: DEFAULT_INITIAL_SEARCH_DATA
}); });
const warehouses = useWarehouseList({
displayLoader: true,
variables: {
first: 30
}
});
const intl = useIntl(); const intl = useIntl();
const [openModal, closeModal] = createDialogActionHandlers< const [openModal, closeModal] = createDialogActionHandlers<
@ -118,9 +126,6 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
{orderMessages => ( {orderMessages => (
<OrderOperations <OrderOperations
order={id} order={id}
onOrderFulfillmentCreate={
orderMessages.handleOrderFulfillmentCreate
}
onNoteAdd={orderMessages.handleNoteAdd} onNoteAdd={orderMessages.handleNoteAdd}
onOrderCancel={orderMessages.handleOrderCancel} onOrderCancel={orderMessages.handleOrderCancel}
onOrderVoid={orderMessages.handleOrderVoid} onOrderVoid={orderMessages.handleOrderVoid}
@ -147,7 +152,6 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
{({ {({
orderAddNote, orderAddNote,
orderCancel, orderCancel,
orderCreateFulfillment,
orderDraftUpdate, orderDraftUpdate,
orderLinesAdd, orderLinesAdd,
orderLineDelete, orderLineDelete,
@ -194,7 +198,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
)} )}
userPermissions={user?.userPermissions || []} userPermissions={user?.userPermissions || []}
onOrderCancel={() => openModal("cancel")} onOrderCancel={() => openModal("cancel")}
onOrderFulfill={() => openModal("fulfill")} onOrderFulfill={() => navigate(orderFulfillUrl(id))}
onFulfillmentCancel={fulfillmentId => onFulfillmentCancel={fulfillmentId =>
navigate( navigate(
orderUrl(id, { orderUrl(id, {
@ -226,6 +230,17 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
navigate(customerUrl(order.user.id)) navigate(customerUrl(order.user.id))
} }
/> />
<OrderCannotCancelOrderDialog
onClose={closeModal}
open={
params.action === "cancel" &&
order?.fulfillments.some(
fulfillment =>
fulfillment.status ===
FulfillmentStatus.FULFILLED
)
}
/>
<OrderCancelDialog <OrderCancelDialog
confirmButtonState={orderCancel.opts.status} confirmButtonState={orderCancel.opts.status}
errors={ errors={
@ -234,10 +249,9 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
number={order?.number} number={order?.number}
open={params.action === "cancel"} open={params.action === "cancel"}
onClose={closeModal} onClose={closeModal}
onSubmit={variables => onSubmit={() =>
orderCancel.mutate({ orderCancel.mutate({
id, id
...variables
}) })
} }
/> />
@ -298,38 +312,6 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
}) })
} }
/> />
<OrderFulfillmentDialog
confirmButtonState={
orderCreateFulfillment.opts.status
}
errors={
orderCreateFulfillment.opts.data
?.orderFulfillmentCreate.errors || []
}
open={params.action === "fulfill"}
lines={maybe(() => order.lines, []).filter(
line => line.quantityFulfilled < line.quantity
)}
onClose={closeModal}
onSubmit={variables =>
orderCreateFulfillment.mutate({
input: {
...variables,
lines: maybe(() => order.lines, [])
.filter(
line =>
line.quantityFulfilled < line.quantity
)
.map((line, lineIndex) => ({
orderLineId: line.id,
quantity: variables.lines[lineIndex]
}))
.filter(line => line.quantity > 0)
},
order: order.id
})
}
/>
<OrderFulfillmentCancelDialog <OrderFulfillmentCancelDialog
confirmButtonState={ confirmButtonState={
orderFulfillmentCancel.opts.status orderFulfillmentCancel.opts.status
@ -339,6 +321,11 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
?.orderFulfillmentCancel.errors || [] ?.orderFulfillmentCancel.errors || []
} }
open={params.action === "cancel-fulfillment"} open={params.action === "cancel-fulfillment"}
warehouses={
warehouses.data?.warehouses.edges.map(
edge => edge.node
) || []
}
onConfirm={variables => onConfirm={variables =>
orderFulfillmentCancel.mutate({ orderFulfillmentCancel.mutate({
id: params.id, id: params.id,

94
src/orders/views/OrderFulfill/OrderFulfill.tsx Normal file
View file

@ -0,0 +1,94 @@
import { useIntl } from "react-intl";
import React from "react";
import { useOrderFulfillData } from "@saleor/orders/queries";
import OrderFulfillPage from "@saleor/orders/components/OrderFulfillPage";
import useNavigator from "@saleor/hooks/useNavigator";
import { orderUrl } from "@saleor/orders/urls";
import { useWarehouseList } from "@saleor/warehouses/queries";
import { WindowTitle } from "@saleor/components/WindowTitle";
import { useOrderFulfill } from "@saleor/orders/mutations";
import useNotifier from "@saleor/hooks/useNotifier";
export interface OrderFulfillProps {
orderId: string;
}
const OrderFulfill: React.FC<OrderFulfillProps> = ({ orderId }) => {
const navigate = useNavigator();
const notify = useNotifier();
const intl = useIntl();
const { data, loading } = useOrderFulfillData({
displayLoader: true,
variables: {
orderId
}
});
const { data: warehouseData, loading: warehousesLoading } = useWarehouseList({
displayLoader: true,
variables: {
first: 20
}
});
const [fulfillOrder, fulfillOrderOpts] = useOrderFulfill({
onCompleted: data => {
if (data.orderFulfill.errors.length === 0) {
navigate(orderUrl(orderId), true);
notify({
text: intl.formatMessage({
defaultMessage: "Fulfilled Items",
description: "order fulfilled success message"
})
});
}
}
});
return (
<>
<WindowTitle
title={
data?.order?.number
? intl.formatMessage(
{
defaultMessage: "Fulfill Order #{orderNumber}",
description: "window title"
},
{
orderNumber: data.order.number
}
)
: intl.formatMessage({
defaultMessage: "Fulfill Order",
description: "window title"
})
}
/>
<OrderFulfillPage
disabled={loading || warehousesLoading || fulfillOrderOpts.loading}
errors={fulfillOrderOpts.data?.orderFulfill.errors}
onBack={() => navigate(orderUrl(orderId))}
onSubmit={formData =>
fulfillOrder({
variables: {
input: {
lines: formData.items.map(line => ({
orderLineId: line.id,
stocks: line.value
})),
notifyCustomer: formData.sendInfo
},
orderId
}
})
}
order={data?.order}
saveButtonBar="default"
warehouses={warehouseData?.warehouses.edges.map(edge => edge.node)}
/>
</>
);
};
OrderFulfill.displayName = "OrderFulfill";
export default OrderFulfill;

2
src/orders/views/OrderFulfill/index.ts Normal file
View file

@ -0,0 +1,2 @@
export * from "./OrderFulfill";
export { default } from "./OrderFulfill";

155
src/orders/views/OrderList/OrderList.tsx
View file

@ -1,12 +1,10 @@
import Button from "@material-ui/core/Button";
import React from "react"; import React from "react";
import { FormattedMessage, useIntl } from "react-intl"; import { useIntl } from "react-intl";
import DeleteFilterTabDialog from "@saleor/components/DeleteFilterTabDialog"; import DeleteFilterTabDialog from "@saleor/components/DeleteFilterTabDialog";
import SaveFilterTabDialog, { import SaveFilterTabDialog, {
SaveFilterTabDialogFormData SaveFilterTabDialogFormData
} from "@saleor/components/SaveFilterTabDialog"; } from "@saleor/components/SaveFilterTabDialog";
import useBulkActions from "@saleor/hooks/useBulkActions";
import useListSettings from "@saleor/hooks/useListSettings"; import useListSettings from "@saleor/hooks/useListSettings";
import useNavigator from "@saleor/hooks/useNavigator"; import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier"; import useNotifier from "@saleor/hooks/useNotifier";
@ -14,20 +12,15 @@ import usePaginator, {
createPaginationState createPaginationState
} from "@saleor/hooks/usePaginator"; } from "@saleor/hooks/usePaginator";
import useShop from "@saleor/hooks/useShop"; import useShop from "@saleor/hooks/useShop";
import { maybe } from "@saleor/misc"; import { maybe, getStringOrPlaceholder } from "@saleor/misc";
import { ListViews } from "@saleor/types"; import { ListViews } from "@saleor/types";
import createSortHandler from "@saleor/utils/handlers/sortHandler"; import createSortHandler from "@saleor/utils/handlers/sortHandler";
import { getSortParams } from "@saleor/utils/sort"; import { getSortParams } from "@saleor/utils/sort";
import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
import createFilterHandlers from "@saleor/utils/handlers/filterHandlers"; import createFilterHandlers from "@saleor/utils/handlers/filterHandlers";
import OrderBulkCancelDialog from "../../components/OrderBulkCancelDialog";
import OrderListPage from "../../components/OrderListPage/OrderListPage"; import OrderListPage from "../../components/OrderListPage/OrderListPage";
import { import { useOrderDraftCreateMutation } from "../../mutations";
TypedOrderBulkCancelMutation,
useOrderDraftCreateMutation
} from "../../mutations";
import { useOrderListQuery } from "../../queries"; import { useOrderListQuery } from "../../queries";
import { OrderBulkCancel } from "../../types/OrderBulkCancel";
import { OrderDraftCreate } from "../../types/OrderDraftCreate"; import { OrderDraftCreate } from "../../types/OrderDraftCreate";
import { import {
orderListUrl, orderListUrl,
@ -56,9 +49,6 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
const notify = useNotifier(); const notify = useNotifier();
const paginate = usePaginator(); const paginate = usePaginator();
const shop = useShop(); const shop = useShop();
const { isSelected, listElements, reset, toggle, toggleAll } = useBulkActions(
params.ids
);
const { updateListSettings, settings } = useListSettings( const { updateListSettings, settings } = useListSettings(
ListViews.ORDER_LIST ListViews.ORDER_LIST
); );
@ -91,7 +81,6 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
resetFilters, resetFilters,
handleSearchChange handleSearchChange
] = createFilterHandlers({ ] = createFilterHandlers({
cleanupFn: reset,
createUrl: orderListUrl, createUrl: orderListUrl,
getFilterQueryParam, getFilterQueryParam,
navigate, navigate,
@ -103,19 +92,16 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
OrderListUrlQueryParams OrderListUrlQueryParams
>(navigate, orderListUrl, params); >(navigate, orderListUrl, params);
const handleTabChange = (tab: number) => { const handleTabChange = (tab: number) =>
reset();
navigate( navigate(
orderListUrl({ orderListUrl({
activeTab: tab.toString(), activeTab: tab.toString(),
...getFilterTabs()[tab - 1].data ...getFilterTabs()[tab - 1].data
}) })
); );
};
const handleFilterTabDelete = () => { const handleFilterTabDelete = () => {
deleteFilterTab(currentTab); deleteFilterTab(currentTab);
reset();
navigate(orderListUrl()); navigate(orderListUrl());
}; };
@ -135,7 +121,7 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
}), }),
[params, settings.rowNumber] [params, settings.rowNumber]
); );
const { data, loading, refetch } = useOrderListQuery({ const { data, loading } = useOrderListQuery({
displayLoader: true, displayLoader: true,
variables: queryVariables variables: queryVariables
}); });
@ -146,101 +132,48 @@ export const OrderList: React.FC<OrderListProps> = ({ params }) => {
params params
); );
const handleOrderBulkCancel = (data: OrderBulkCancel) => {
if (data.orderBulkCancel.errors.length === 0) {
notify({
text: intl.formatMessage({
defaultMessage: "Orders cancelled"
})
});
reset();
refetch();
closeModal();
}
};
const handleSort = createSortHandler(navigate, orderListUrl, params); const handleSort = createSortHandler(navigate, orderListUrl, params);
return ( return (
<TypedOrderBulkCancelMutation onCompleted={handleOrderBulkCancel}> <>
{(orderBulkCancel, orderBulkCancelOpts) => { <OrderListPage
const onOrderBulkCancel = (restock: boolean) => currencySymbol={currencySymbol}
orderBulkCancel({ settings={settings}
variables: { currentTab={currentTab}
ids: params.ids, disabled={loading}
restock filterOpts={getFilterOpts(params)}
} orders={maybe(() => data.orders.edges.map(edge => edge.node))}
}); pageInfo={pageInfo}
sort={getSortParams(params)}
return ( onAdd={createOrder}
<> onNextPage={loadNextPage}
<OrderListPage onPreviousPage={loadPreviousPage}
currencySymbol={currencySymbol} onUpdateListSettings={updateListSettings}
settings={settings} onRowClick={id => () => navigate(orderUrl(id))}
currentTab={currentTab} onSort={handleSort}
disabled={loading} onSearchChange={handleSearchChange}
filterOpts={getFilterOpts(params)} onFilterChange={changeFilters}
orders={maybe(() => data.orders.edges.map(edge => edge.node))} onTabSave={() => openModal("save-search")}
pageInfo={pageInfo} onTabDelete={() => openModal("delete-search")}
sort={getSortParams(params)} onTabChange={handleTabChange}
onAdd={createOrder} initialSearch={params.query || ""}
onNextPage={loadNextPage} tabs={getFilterTabs().map(tab => tab.name)}
onPreviousPage={loadPreviousPage} onAll={resetFilters}
onUpdateListSettings={updateListSettings} />
onRowClick={id => () => navigate(orderUrl(id))} <SaveFilterTabDialog
onSort={handleSort} open={params.action === "save-search"}
isChecked={isSelected} confirmButtonState="default"
selected={listElements.length} onClose={closeModal}
toggle={toggle} onSubmit={handleFilterTabSave}
toggleAll={toggleAll} />
toolbar={ <DeleteFilterTabDialog
<Button open={params.action === "delete-search"}
color="primary" confirmButtonState="default"
onClick={() => onClose={closeModal}
openModal("cancel", { onSubmit={handleFilterTabDelete}
ids: listElements tabName={getStringOrPlaceholder(tabs[currentTab - 1]?.name)}
}) />
} </>
>
<FormattedMessage
defaultMessage="Cancel"
description="cancel orders, button"
/>
</Button>
}
onSearchChange={handleSearchChange}
onFilterChange={changeFilters}
onTabSave={() => openModal("save-search")}
onTabDelete={() => openModal("delete-search")}
onTabChange={handleTabChange}
initialSearch={params.query || ""}
tabs={getFilterTabs().map(tab => tab.name)}
onAll={resetFilters}
/>
<OrderBulkCancelDialog
confirmButtonState={orderBulkCancelOpts.status}
numberOfOrders={maybe(() => params.ids.length.toString(), "...")}
onClose={closeModal}
onConfirm={onOrderBulkCancel}
open={params.action === "cancel"}
/>
<SaveFilterTabDialog
open={params.action === "save-search"}
confirmButtonState="default"
onClose={closeModal}
onSubmit={handleFilterTabSave}
/>
<DeleteFilterTabDialog
open={params.action === "delete-search"}
confirmButtonState="default"
onClose={closeModal}
onSubmit={handleFilterTabDelete}
tabName={maybe(() => tabs[currentTab - 1].name, "...")}
/>
</>
);
}}
</TypedOrderBulkCancelMutation>
); );
}; };

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

File diff suppressed because it is too large Load diff

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

@ -2,6 +2,7 @@ import { storiesOf } from "@storybook/react";
import React from "react"; import React from "react";
import { OrderErrorCode } from "@saleor/types/globalTypes"; import { OrderErrorCode } from "@saleor/types/globalTypes";
import { warehouseList } from "@saleor/warehouses/fixtures";
import OrderFulfillmentCancelDialog, { import OrderFulfillmentCancelDialog, {
OrderFulfillmentCancelDialogProps OrderFulfillmentCancelDialogProps
} from "../../../orders/components/OrderFulfillmentCancelDialog"; } from "../../../orders/components/OrderFulfillmentCancelDialog";
@ -12,7 +13,8 @@ const props: OrderFulfillmentCancelDialogProps = {
errors: [], errors: [],
onClose: () => undefined, onClose: () => undefined,
onConfirm: () => undefined, onConfirm: () => undefined,
open: true open: true,
warehouses: warehouseList
}; };
storiesOf("Orders / OrderFulfillmentCancelDialog", module) storiesOf("Orders / OrderFulfillmentCancelDialog", module)

33
src/types/globalTypes.ts
View file

@ -24,6 +24,7 @@ export enum AccountErrorCode {
NOT_FOUND = "NOT_FOUND", NOT_FOUND = "NOT_FOUND",
OUT_OF_SCOPE_GROUP = "OUT_OF_SCOPE_GROUP", OUT_OF_SCOPE_GROUP = "OUT_OF_SCOPE_GROUP",
OUT_OF_SCOPE_PERMISSION = "OUT_OF_SCOPE_PERMISSION", OUT_OF_SCOPE_PERMISSION = "OUT_OF_SCOPE_PERMISSION",
OUT_OF_SCOPE_SERVICE_ACCOUNT = "OUT_OF_SCOPE_SERVICE_ACCOUNT",
OUT_OF_SCOPE_USER = "OUT_OF_SCOPE_USER", OUT_OF_SCOPE_USER = "OUT_OF_SCOPE_USER",
PASSWORD_ENTIRELY_NUMERIC = "PASSWORD_ENTIRELY_NUMERIC", PASSWORD_ENTIRELY_NUMERIC = "PASSWORD_ENTIRELY_NUMERIC",
PASSWORD_TOO_COMMON = "PASSWORD_TOO_COMMON", PASSWORD_TOO_COMMON = "PASSWORD_TOO_COMMON",
@ -456,6 +457,7 @@ export enum OrderErrorCode {
CANNOT_DELETE = "CANNOT_DELETE", CANNOT_DELETE = "CANNOT_DELETE",
CANNOT_REFUND = "CANNOT_REFUND", CANNOT_REFUND = "CANNOT_REFUND",
CAPTURE_INACTIVE_PAYMENT = "CAPTURE_INACTIVE_PAYMENT", CAPTURE_INACTIVE_PAYMENT = "CAPTURE_INACTIVE_PAYMENT",
DUPLICATED_INPUT_ITEM = "DUPLICATED_INPUT_ITEM",
FULFILL_ORDER_LINE = "FULFILL_ORDER_LINE", FULFILL_ORDER_LINE = "FULFILL_ORDER_LINE",
GRAPHQL_ERROR = "GRAPHQL_ERROR", GRAPHQL_ERROR = "GRAPHQL_ERROR",
INSUFFICIENT_STOCK = "INSUFFICIENT_STOCK", INSUFFICIENT_STOCK = "INSUFFICIENT_STOCK",
@ -790,6 +792,7 @@ export enum WebhookEventTypeEnum {
} }
export enum WebhookSortField { export enum WebhookSortField {
APP = "APP",
NAME = "NAME", NAME = "NAME",
SERVICE_ACCOUNT = "SERVICE_ACCOUNT", SERVICE_ACCOUNT = "SERVICE_ACCOUNT",
TARGET_URL = "TARGET_URL", TARGET_URL = "TARGET_URL",
@ -994,18 +997,7 @@ export interface DraftOrderInput {
} }
export interface FulfillmentCancelInput { export interface FulfillmentCancelInput {
restock?: boolean | null; warehouseId: string;
}
export interface FulfillmentCreateInput {
trackingNumber?: string | null;
notifyCustomer?: boolean | null;
lines: (FulfillmentLineInput | null)[];
}
export interface FulfillmentLineInput {
orderLineId?: string | null;
quantity?: number | null;
} }
export interface FulfillmentUpdateTrackingInput { export interface FulfillmentUpdateTrackingInput {
@ -1074,6 +1066,21 @@ export interface OrderFilterInput {
search?: string | null; search?: string | null;
} }
export interface OrderFulfillInput {
lines: OrderFulfillLineInput[];
notifyCustomer?: boolean | null;
}
export interface OrderFulfillLineInput {
orderLineId?: string | null;
stocks: OrderFulfillStockInput[];
}
export interface OrderFulfillStockInput {
quantity?: number | null;
warehouse?: string | null;
}
export interface OrderLineCreateInput { export interface OrderLineCreateInput {
quantity: number; quantity: number;
variantId: string; variantId: string;
@ -1478,6 +1485,7 @@ export interface WebhookCreateInput {
targetUrl?: string | null; targetUrl?: string | null;
events?: (WebhookEventTypeEnum | null)[] | null; events?: (WebhookEventTypeEnum | null)[] | null;
serviceAccount?: string | null; serviceAccount?: string | null;
app?: string | null;
isActive?: boolean | null; isActive?: boolean | null;
secretKey?: string | null; secretKey?: string | null;
} }
@ -1497,6 +1505,7 @@ export interface WebhookUpdateInput {
targetUrl?: string | null; targetUrl?: string | null;
events?: (WebhookEventTypeEnum | null)[] | null; events?: (WebhookEventTypeEnum | null)[] | null;
serviceAccount?: string | null; serviceAccount?: string | null;
app?: string | null;
isActive?: boolean | null; isActive?: boolean | null;
secretKey?: string | null; secretKey?: string | null;
} }