From 596cc41a7f98fe5b63b16a18d8e5305e24496f0f Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Wed, 22 Apr 2020 00:37:06 +0200 Subject: [PATCH 01/19] Add warehouse info --- .../OrderFulfillment/OrderFulfillment.tsx | 58 +++++++++++++++---- src/orders/fixtures.ts | 2 +- src/orders/queries.ts | 29 ++++++---- 3 files changed, 67 insertions(+), 22 deletions(-) diff --git a/src/orders/components/OrderFulfillment/OrderFulfillment.tsx b/src/orders/components/OrderFulfillment/OrderFulfillment.tsx index 2a43cd0c7..1f778f5e4 100644 --- a/src/orders/components/OrderFulfillment/OrderFulfillment.tsx +++ b/src/orders/components/OrderFulfillment/OrderFulfillment.tsx @@ -9,6 +9,7 @@ import TableRow from "@material-ui/core/TableRow"; import Typography from "@material-ui/core/Typography"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; +import classNames from "classnames"; import CardMenu from "@saleor/components/CardMenu"; import CardTitle from "@saleor/components/CardTitle"; @@ -46,7 +47,15 @@ const useStyles = makeStyles( textAlign: "right", width: 120 }, - + infoLabel: { + display: "inline-block" + }, + infoLabelWithMargin: { + marginBottom: theme.spacing() + }, + infoRow: { + padding: theme.spacing(2, 3) + }, orderNumber: { display: "inline", marginLeft: theme.spacing(1) @@ -68,7 +77,7 @@ interface OrderFulfillmentProps { onTrackingCodeAdd: () => void; } -const numberOfColumns = 3; +const numberOfColumns = 4; const OrderFulfillment: React.FC = props => { const { @@ -216,18 +225,47 @@ const OrderFulfillment: React.FC = props => { ))} - {maybe(() => fulfillment.trackingNumber) && ( - - + + + + default + + ) }} /> - - - )} + + + {fulfillment?.trackingNumber && ( + + {fulfillment.trackingNumber} + + ) + }} + /> + )} + + + {status === FulfillmentStatus.FULFILLED && !fulfillment.trackingNumber && ( diff --git a/src/orders/fixtures.ts b/src/orders/fixtures.ts index a07af34ac..c08cf001f 100644 --- a/src/orders/fixtures.ts +++ b/src/orders/fixtures.ts @@ -905,7 +905,7 @@ export const order = (placeholder: string): OrderDetails_order => ({ } ], status: FulfillmentStatus.FULFILLED, - trackingNumber: "" + trackingNumber: "01nn12399su12nndfsy" } ], id: "T3JkZXI6OQ==", diff --git a/src/orders/queries.ts b/src/orders/queries.ts index 896a2f665..b69b3c65c 100644 --- a/src/orders/queries.ts +++ b/src/orders/queries.ts @@ -73,11 +73,28 @@ export const fragmentOrderLine = gql` } } `; +export const fulfillmentFragment = gql` + ${fragmentOrderLine} + fragment FulfillmentFragment on Fulfillment { + id + lines { + id + quantity + orderLine { + ...OrderLineFragment + } + } + fulfillmentOrder + status + trackingNumber + } +`; export const fragmentOrderDetails = gql` ${fragmentAddress} ${fragmentOrderEvent} ${fragmentOrderLine} + ${fulfillmentFragment} fragment OrderDetailsFragment on Order { id billingAddress { @@ -90,17 +107,7 @@ export const fragmentOrderDetails = gql` ...OrderEventFragment } fulfillments { - id - lines { - id - quantity - orderLine { - ...OrderLineFragment - } - } - fulfillmentOrder - status - trackingNumber + ...FulfillmentFragment } lines { ...OrderLineFragment From 7cc3492e71a7d8509ad372330171f28d4199a601 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Wed, 22 Apr 2020 01:09:51 +0200 Subject: [PATCH 02/19] Add warehouse selection to restock items --- src/intl.ts | 4 + .../OrderFulfillment/OrderFulfillment.tsx | 2 +- .../OrderFulfillmentCancelDialog.tsx | 155 +++++++++++------- .../orders/OrderFulfillmentCancelDialog.tsx | 4 +- 4 files changed, 102 insertions(+), 63 deletions(-) diff --git a/src/intl.ts b/src/intl.ts index 2f8841205..68b4efd27 100644 --- a/src/intl.ts +++ b/src/intl.ts @@ -81,6 +81,10 @@ export const commonMessages = defineMessages({ }); export const buttonMessages = defineMessages({ + accept: { + defaultMessage: "Accept", + description: "button" + }, back: { defaultMessage: "Back", description: "button" diff --git a/src/orders/components/OrderFulfillment/OrderFulfillment.tsx b/src/orders/components/OrderFulfillment/OrderFulfillment.tsx index 1f778f5e4..435cf5b59 100644 --- a/src/orders/components/OrderFulfillment/OrderFulfillment.tsx +++ b/src/orders/components/OrderFulfillment/OrderFulfillment.tsx @@ -144,7 +144,7 @@ const OrderFulfillment: React.FC = props => { menuItems={[ { label: intl.formatMessage({ - defaultMessage: "Cancel shipment", + defaultMessage: "Cancel Fulfillment", description: "button" }), onSelect: onOrderFulfillmentCancel diff --git a/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx b/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx index 69eab23d3..4c24797ee 100644 --- a/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx +++ b/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx @@ -11,25 +11,29 @@ import { FormattedMessage, useIntl } from "react-intl"; import ConfirmButton, { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; -import { ControlledCheckbox } from "@saleor/components/ControlledCheckbox"; import Form from "@saleor/components/Form"; import { buttonMessages } from "@saleor/intl"; import { OrderErrorFragment } from "@saleor/orders/types/OrderErrorFragment"; import FormSpacer from "@saleor/components/FormSpacer"; import getOrderErrorMessage from "@saleor/utils/errors/order"; +import { WarehouseFragment } from "@saleor/warehouses/types/WarehouseFragment"; +import SingleAutocompleteSelectField from "@saleor/components/SingleAutocompleteSelectField"; +import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler"; -export interface FormData { - restock: boolean; +export interface OrderFulfillmentCancelDialogFormData { + warehouse: string; } const useStyles = makeStyles( theme => ({ - deleteButton: { - "&:hover": { - backgroundColor: theme.palette.error.main - }, - backgroundColor: theme.palette.error.main, - color: theme.palette.error.contrastText + enableOverflow: { + overflow: "visible" + }, + paragraph: { + marginBottom: theme.spacing(2) + }, + selectCcontainer: { + width: "60%" } }), { name: "OrderFulfillmentCancelDialog" } @@ -39,69 +43,98 @@ export interface OrderFulfillmentCancelDialogProps { confirmButtonState: ConfirmButtonTransitionState; errors: OrderErrorFragment[]; open: boolean; + warehouses: WarehouseFragment[]; onClose(); - onConfirm(data: FormData); + onConfirm(data: OrderFulfillmentCancelDialogFormData); } const OrderFulfillmentCancelDialog: React.FC = props => { - const { confirmButtonState, errors, open, onConfirm, onClose } = props; + const { + confirmButtonState, + errors, + open, + warehouses, + onConfirm, + onClose + } = props; const classes = useStyles(props); const intl = useIntl(); + const [displayValue, setDisplayValue] = React.useState(""); + + const choices = warehouses?.map(warehouse => ({ + label: warehouse.name, + value: warehouse.id + })); return ( - -
- {({ change, data, submit }) => ( - <> - - - - - - - - - {errors.length > 0 && ( - <> - - {errors.map(err => ( - - {getOrderErrorMessage(err, intl)} - - ))} - - )} - - - - + + + {({ change, data: formData, submit }) => { + const handleChange = createSingleAutocompleteSelectHandler( + change, + setDisplayValue, + choices + ); + return ( + <> + - - - - )} + + + + + +
+ +
+ {errors.length > 0 && ( + <> + + {errors.map(err => ( + + {getOrderErrorMessage(err, intl)} + + ))} + + )} + + + + + + + + + ); + }}
); diff --git a/src/storybook/stories/orders/OrderFulfillmentCancelDialog.tsx b/src/storybook/stories/orders/OrderFulfillmentCancelDialog.tsx index 33277fbaa..eb9fd4f3c 100644 --- a/src/storybook/stories/orders/OrderFulfillmentCancelDialog.tsx +++ b/src/storybook/stories/orders/OrderFulfillmentCancelDialog.tsx @@ -2,6 +2,7 @@ import { storiesOf } from "@storybook/react"; import React from "react"; import { OrderErrorCode } from "@saleor/types/globalTypes"; +import { warehouseList } from "@saleor/warehouses/fixtures"; import OrderFulfillmentCancelDialog, { OrderFulfillmentCancelDialogProps } from "../../../orders/components/OrderFulfillmentCancelDialog"; @@ -12,7 +13,8 @@ const props: OrderFulfillmentCancelDialogProps = { errors: [], onClose: () => undefined, onConfirm: () => undefined, - open: true + open: true, + warehouses: warehouseList }; storiesOf("Orders / OrderFulfillmentCancelDialog", module) From bc15224fcd362b4ccdf9c43199cbf87ccfec4dfa Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Wed, 22 Apr 2020 01:14:04 +0200 Subject: [PATCH 03/19] Refactor message and remove restock checkbox --- .../OrderCancelDialog/OrderCancelDialog.tsx | 121 ++++++------------ 1 file changed, 38 insertions(+), 83 deletions(-) diff --git a/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx b/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx index b65368c00..dc2a21fc9 100644 --- a/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx +++ b/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx @@ -4,45 +4,25 @@ import DialogActions from "@material-ui/core/DialogActions"; import DialogContent from "@material-ui/core/DialogContent"; import DialogContentText from "@material-ui/core/DialogContentText"; import DialogTitle from "@material-ui/core/DialogTitle"; -import { makeStyles } from "@material-ui/core/styles"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; import ConfirmButton, { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; -import ControlledCheckbox from "@saleor/components/ControlledCheckbox"; -import Form from "@saleor/components/Form"; import { buttonMessages } from "@saleor/intl"; import { OrderErrorFragment } from "@saleor/orders/types/OrderErrorFragment"; import FormSpacer from "@saleor/components/FormSpacer"; import getOrderErrorMessage from "@saleor/utils/errors/order"; import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors"; -export interface FormData { - restock: boolean; -} - -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 { confirmButtonState: ConfirmButtonTransitionState; errors: OrderErrorFragment[]; number: string; open: boolean; onClose?(); - onSubmit(data: FormData); + onSubmit(); } const OrderCancelDialog: React.FC = props => { @@ -55,76 +35,51 @@ const OrderCancelDialog: React.FC = props => { onClose } = props; - const classes = useStyles(props); const intl = useIntl(); const errors = useModalDialogErrors(apiErrors, open); return ( - -
- {({ data, change }) => ( + + + + + + + + + {errors.length > 0 && ( <> - - - - - - - + + {errors.map(err => ( + + {getOrderErrorMessage(err, intl)} - {errors.length > 0 && ( - <> - - {errors.map(err => ( - - {getOrderErrorMessage(err, intl)} - - ))} - - )} - - - - - - - + ))} )} - + + + + + + +
); }; From 27a740ed6b6c62b5561d1b0841670abb666fc809 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Mon, 27 Apr 2020 16:26:57 +0200 Subject: [PATCH 04/19] Fix warehouse selection --- .../components/OrderFulfillment/OrderFulfillment.tsx | 4 ++-- .../OrderFulfillmentCancelDialog.tsx | 9 +++++---- src/orders/views/OrderDetails/index.tsx | 12 ++++++++++++ 3 files changed, 19 insertions(+), 6 deletions(-) diff --git a/src/orders/components/OrderFulfillment/OrderFulfillment.tsx b/src/orders/components/OrderFulfillment/OrderFulfillment.tsx index 435cf5b59..73d1d0ddf 100644 --- a/src/orders/components/OrderFulfillment/OrderFulfillment.tsx +++ b/src/orders/components/OrderFulfillment/OrderFulfillment.tsx @@ -116,8 +116,8 @@ const OrderFulfillment: React.FC = props => { ) : intl.formatMessage( { - defaultMessage: "Fulfilled ({quantity})", - description: "section header" + defaultMessage: "Cancelled ({quantity})", + description: "cancelled fulfillment, section header" }, { quantity diff --git a/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx b/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx index 4c24797ee..653b865b1 100644 --- a/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx +++ b/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx @@ -21,7 +21,7 @@ import SingleAutocompleteSelectField from "@saleor/components/SingleAutocomplete import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler"; export interface OrderFulfillmentCancelDialogFormData { - warehouse: string; + warehouseId: string; } const useStyles = makeStyles( @@ -77,7 +77,7 @@ const OrderFulfillmentCancelDialog: React.FC fullWidth maxWidth="sm" > -
+ {({ change, data: formData, submit }) => { const handleChange = createSingleAutocompleteSelectHandler( change, @@ -104,8 +104,8 @@ const OrderFulfillmentCancelDialog: React.FC defaultMessage: "Select Warehouse", description: "select warehouse to restock items" })} - name="warehouse" - value={formData.warehouse} + name="warehouseId" + value={formData.warehouseId} onChange={handleChange} /> @@ -125,6 +125,7 @@ const OrderFulfillmentCancelDialog: React.FC = ({ id, params }) => { } = useOrderVariantSearch({ variables: DEFAULT_INITIAL_SEARCH_DATA }); + const warehouses = useWarehouseList({ + displayLoader: true, + variables: { + first: 30 + } + }); const intl = useIntl(); const [openModal, closeModal] = createDialogActionHandlers< @@ -339,6 +346,11 @@ export const OrderDetails: React.FC = ({ id, params }) => { ?.orderFulfillmentCancel.errors || [] } open={params.action === "cancel-fulfillment"} + warehouses={ + warehouses.data?.warehouses.edges.map( + edge => edge.node + ) || [] + } onConfirm={variables => orderFulfillmentCancel.mutate({ id: params.id, From 9812277e9a41b5ce5ba565191b509a471d607757 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Mon, 20 Apr 2020 11:37:32 +0200 Subject: [PATCH 05/19] wip --- src/hooks/useFormset.ts | 4 +- .../OrderFulfillPage.stories.tsx | 28 ++ .../OrderFulfillPage/OrderFulfillPage.tsx | 270 ++++++++++++++++++ .../components/OrderFulfillPage/fixtures.ts | 163 +++++++++++ .../components/OrderFulfillPage/index.ts | 2 + src/orders/queries.ts | 45 +++ src/orders/types/OrderFulfillData.ts | 70 +++++ .../views/OrderFulfill/OrderFulfill.tsx | 0 src/orders/views/OrderFulfill/index.ts | 0 9 files changed, 580 insertions(+), 2 deletions(-) create mode 100644 src/orders/components/OrderFulfillPage/OrderFulfillPage.stories.tsx create mode 100644 src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx create mode 100644 src/orders/components/OrderFulfillPage/fixtures.ts create mode 100644 src/orders/components/OrderFulfillPage/index.ts create mode 100644 src/orders/types/OrderFulfillData.ts create mode 100644 src/orders/views/OrderFulfill/OrderFulfill.tsx create mode 100644 src/orders/views/OrderFulfill/index.ts diff --git a/src/hooks/useFormset.ts b/src/hooks/useFormset.ts index 8891d48b5..eb506e272 100644 --- a/src/hooks/useFormset.ts +++ b/src/hooks/useFormset.ts @@ -18,8 +18,8 @@ export interface UseFormsetOutput { set: (data: FormsetData) => void; } function useFormset( - initial: FormsetData -): UseFormsetOutput { + initial: FormsetData +): UseFormsetOutput { const [data, setData] = useStateFromProps>( initial || [] ); diff --git a/src/orders/components/OrderFulfillPage/OrderFulfillPage.stories.tsx b/src/orders/components/OrderFulfillPage/OrderFulfillPage.stories.tsx new file mode 100644 index 000000000..58e12a34b --- /dev/null +++ b/src/orders/components/OrderFulfillPage/OrderFulfillPage.stories.tsx @@ -0,0 +1,28 @@ +import { storiesOf } from "@storybook/react"; +import React from "react"; + +import Decorator from "@saleor/storybook/Decorator"; +import { warehouseList } from "@saleor/warehouses/fixtures"; +import OrderFulfillPage, { OrderFulfillPageProps } from "./OrderFulfillPage"; +import { orderToFulfill } from "./fixtures"; + +const props: OrderFulfillPageProps = { + disabled: false, + onBack: () => undefined, + onSubmit: () => undefined, + order: orderToFulfill, + saveButtonBar: "default", + warehouses: warehouseList +}; + +storiesOf("Views / Orders / Fulfill order", module) + .addDecorator(Decorator) + .add("default", () => ) + .add("loading", () => ( + + )); diff --git a/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx b/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx new file mode 100644 index 000000000..fecf6dcda --- /dev/null +++ b/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx @@ -0,0 +1,270 @@ +import React from "react"; +import { FormattedMessage, useIntl } from "react-intl"; +import Card from "@material-ui/core/Card"; +import Typography from "@material-ui/core/Typography"; +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 useFormset, { FormsetData } from "@saleor/hooks/useFormset"; +import { StockInput } from "@saleor/types/globalTypes"; +import { WarehouseFragment } from "@saleor/warehouses/types/WarehouseFragment"; +import TableCellAvatar, { + AVATAR_MARGIN +} 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 } 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"; + +const useStyles = makeStyles( + theme => ({ + colName: { + width: 300 + }, + colNameLabel: { + marginLeft: AVATAR_MARGIN + }, + colQuantity: { + textAlign: "right", + width: 200 + }, + colQuantityContent: { + alignItems: "center", + display: "inline-flex" + }, + colQuantityTotal: { + textAlign: "right", + width: 180 + }, + colSku: { + textAlign: "right", + width: 120 + }, + error: { + color: theme.palette.error.main + }, + quantityInput: { + width: "4rem" + }, + remainingQuantity: { + marginLeft: theme.spacing(), + paddingTop: 14 + }, + table: { + "&&": { + tableLayout: "fixed" + } + } + }), + { name: "OrderFulfillPage" } +); + +interface OrderFulfillFormData { + sendInfo: boolean; +} +interface OrderFulfillSubmitData extends OrderFulfillFormData { + items: FormsetData; +} +export interface OrderFulfillPageProps { + disabled: boolean; + order: OrderFulfillData_order; + saveButtonBar: ConfirmButtonTransitionState; + warehouses: WarehouseFragment[]; + onBack: () => undefined; + onSubmit: (data: OrderFulfillSubmitData) => void; +} + +const initialFormData: OrderFulfillFormData = { + sendInfo: true +}; + +const OrderFulfillPage: React.FC = ({ + disabled, + order, + saveButtonBar, + warehouses, + onBack, + onSubmit +}) => { + const intl = useIntl(); + const classes = useStyles({}); + + const { change, data: formsetData } = useFormset( + order?.lines.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 ( + + + + {({ change, data, submit }) => ( + <> + + + + + + + + + + + + + + {warehouses.map(warehouse => ( + + {warehouse.name} + + ))} + + + + + + + {order?.lines.map((line, lineIndex) => { + const remainingQuantity = + line.quantity - line.quantityFulfilled; + + return ( + + + {line.productName} + + + {line.variant.sku} + + {warehouses.map(warehouse => { + const warehouseStock = line.variant.stocks.find( + stock => stock.warehouse.id === warehouse.id + ); + if (!warehouseStock) { + return ( + + + + ); + } + + return ( + +
+ undefined} + error={ + remainingQuantity < + formsetData[lineIndex].value[0] + .quantity || + formsetData[lineIndex].value[0].quantity > + warehouseStock.quantity + } + /> +
+ / {warehouseStock.quantity} +
+
+ + ); + })} + + {formsetData[lineIndex].value.reduce( + (acc, stock) => acc + stock.quantity, + 0 + )}{" "} + / {remainingQuantity} + + + ); + })} + + + + + + )} + + + ); +}; + +OrderFulfillPage.displayName = "OrderFulfillPage"; +export default OrderFulfillPage; diff --git a/src/orders/components/OrderFulfillPage/fixtures.ts b/src/orders/components/OrderFulfillPage/fixtures.ts new file mode 100644 index 000000000..1e72213aa --- /dev/null +++ b/src/orders/components/OrderFulfillPage/fixtures.ts @@ -0,0 +1,163 @@ +/* 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 + }, + { + __typename: "Stock", + id: "U3RvY2s6NTIx", + warehouse: warehouseList[1], + quantity: 1217 + }, + { + __typename: "Stock", + id: "U3RvY2s6NTIz", + warehouse: warehouseList[2], + quantity: 1217 + }, + { + __typename: "Stock", + id: "U3RvY2s6NTI0", + warehouse: warehouseList[3], + quantity: 1220 + } + ] + }, + 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 + }, + { + __typename: "Stock", + id: "U3RvY2s6NTE=", + warehouse: warehouseList[2], + quantity: 760 + }, + { + __typename: "Stock", + id: "U3RvY2s6NTM=", + warehouse: warehouseList[3], + quantity: 760 + } + ] + }, + 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 + }, + { + __typename: "Stock", + id: "U3RvY2s6NTY=", + warehouse: warehouseList[2], + quantity: 587 + } + ] + }, + thumbnail: { + __typename: "Image", + url: placeholderImage + } + } + ], + number: "9123" +}; diff --git a/src/orders/components/OrderFulfillPage/index.ts b/src/orders/components/OrderFulfillPage/index.ts new file mode 100644 index 000000000..064e689ba --- /dev/null +++ b/src/orders/components/OrderFulfillPage/index.ts @@ -0,0 +1,2 @@ +export * from "./OrderFulfillPage"; +export { default } from "./OrderFulfillPage"; diff --git a/src/orders/queries.ts b/src/orders/queries.ts index b69b3c65c..4089d9ded 100644 --- a/src/orders/queries.ts +++ b/src/orders/queries.ts @@ -13,6 +13,10 @@ import { SearchOrderVariant as SearchOrderVariantType, SearchOrderVariantVariables } from "./types/SearchOrderVariant"; +import { + OrderFulfillData, + OrderFulfillDataVariables +} from "./types/OrderFulfillData"; export const fragmentOrderEvent = gql` fragment OrderEventFragment on OrderEvent { @@ -334,3 +338,44 @@ export const useOrderVariantSearch = makeTopLevelSearch< SearchOrderVariantType, SearchOrderVariantVariables >(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 + } + } + thumbnail(size: 64) { + url + } + } + number + } + } +`; +export const useOrderFulfillData = makeQuery< + OrderFulfillData, + OrderFulfillDataVariables +>(orderFulfillData); diff --git a/src/orders/types/OrderFulfillData.ts b/src/orders/types/OrderFulfillData.ts new file mode 100644 index 000000000..b9fbf9bf4 --- /dev/null +++ b/src/orders/types/OrderFulfillData.ts @@ -0,0 +1,70 @@ +/* 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; +} + +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; +} diff --git a/src/orders/views/OrderFulfill/OrderFulfill.tsx b/src/orders/views/OrderFulfill/OrderFulfill.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/src/orders/views/OrderFulfill/index.ts b/src/orders/views/OrderFulfill/index.ts new file mode 100644 index 000000000..e69de29bb From a5c1c9d544205a50b036d706cc2387229371e9e2 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Mon, 20 Apr 2020 18:23:54 +0200 Subject: [PATCH 06/19] Create fulfillment page --- .../OrderFulfillPage/OrderFulfillPage.tsx | 116 ++++++++++++++---- .../OrderFulfillmentDialog.tsx | 2 +- 2 files changed, 91 insertions(+), 27 deletions(-) diff --git a/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx b/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx index fecf6dcda..b2cd30842 100644 --- a/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx +++ b/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx @@ -1,20 +1,19 @@ import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; import Card from "@material-ui/core/Card"; -import Typography from "@material-ui/core/Typography"; +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 { StockInput } from "@saleor/types/globalTypes"; import { WarehouseFragment } from "@saleor/warehouses/types/WarehouseFragment"; -import TableCellAvatar, { - AVATAR_MARGIN -} from "@saleor/components/TableCellAvatar"; +import TableCellAvatar from "@saleor/components/TableCellAvatar"; import Container from "@saleor/components/Container"; import PageHeader from "@saleor/components/PageHeader"; import SaveButtonBar from "@saleor/components/SaveButtonBar"; @@ -24,18 +23,21 @@ import { OrderFulfillData_order } 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"; const useStyles = makeStyles( theme => ({ + actionBar: { + flexDirection: "row", + paddingLeft: theme.spacing(2) + 2 + }, colName: { width: 300 }, - colNameLabel: { - marginLeft: AVATAR_MARGIN - }, colQuantity: { textAlign: "right", - width: 200 + width: 210 }, colQuantityContent: { alignItems: "center", @@ -52,12 +54,17 @@ const useStyles = makeStyles( error: { color: theme.palette.error.main }, + full: { + fontWeight: 600 + }, + quantityInnerInput: { + padding: "16px 0 14px 12px" + }, quantityInput: { - width: "4rem" + width: 100 }, remainingQuantity: { - marginLeft: theme.spacing(), - paddingTop: 14 + marginLeft: theme.spacing() }, table: { "&&": { @@ -98,7 +105,10 @@ const OrderFulfillPage: React.FC = ({ const intl = useIntl(); const classes = useStyles({}); - const { change, data: formsetData } = useFormset( + const { change: formsetChange, data: formsetData } = useFormset< + null, + StockInput[] + >( order?.lines.map(line => ({ data: null, id: line.id, @@ -149,9 +159,7 @@ const OrderFulfillPage: React.FC = ({ - - - + = ({ {order?.lines.map((line, lineIndex) => { const remainingQuantity = line.quantity - line.quantityFulfilled; + const quantityToFulfill = formsetData[ + lineIndex + ].value.reduce( + (quantityToFulfill, lineInput) => + quantityToFulfill + lineInput.quantity, + 0 + ); + const overfulfill = remainingQuantity < quantityToFulfill; return ( @@ -187,6 +203,15 @@ const OrderFulfillPage: React.FC = ({ thumbnail={line?.thumbnail?.url} > {line.productName} + + {line.variant.attributes + .map(attribute => + attribute.values + .map(attributeValue => attributeValue.name) + .join(", ") + ) + .join(" / ")} + {line.variant.sku} @@ -195,6 +220,10 @@ const OrderFulfillPage: React.FC = ({ 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 ( = ({ + formsetChange( + line.id, + update( + { + quantity: parseInt( + event.target.value, + 10 + ), + warehouse: warehouse.id + }, + formsetData[lineIndex].value, + (a, b) => a.warehouse === b.warehouse + ) + ) } - onChange={event => undefined} error={ - remainingQuantity < - formsetData[lineIndex].value[0] - .quantity || - formsetData[lineIndex].value[0].quantity > + overfulfill || + formsetStock.quantity > warehouseStock.quantity } /> @@ -241,10 +283,15 @@ const OrderFulfillPage: React.FC = ({ ); })} - {formsetData[lineIndex].value.reduce( - (acc, stock) => acc + stock.quantity, - 0 - )}{" "} + + {quantityToFulfill} + {" "} / {remainingQuantity} @@ -252,9 +299,26 @@ const OrderFulfillPage: React.FC = ({ })} + + + Date: Mon, 20 Apr 2020 19:18:20 +0200 Subject: [PATCH 07/19] Add fulfillment view --- .../OrderFulfillPage/OrderFulfillPage.tsx | 32 +++++++++++++-- src/orders/index.tsx | 9 +++- src/orders/urls.ts | 6 ++- src/orders/views/OrderDetails/index.tsx | 39 ++---------------- .../views/OrderFulfill/OrderFulfill.tsx | 41 +++++++++++++++++++ src/orders/views/OrderFulfill/index.ts | 2 + 6 files changed, 87 insertions(+), 42 deletions(-) diff --git a/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx b/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx index b2cd30842..2e6ff2c74 100644 --- a/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx +++ b/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx @@ -25,6 +25,8 @@ 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"; const useStyles = makeStyles( theme => ({ @@ -86,7 +88,7 @@ export interface OrderFulfillPageProps { order: OrderFulfillData_order; saveButtonBar: ConfirmButtonTransitionState; warehouses: WarehouseFragment[]; - onBack: () => undefined; + onBack: () => void; onSubmit: (data: OrderFulfillSubmitData) => void; } @@ -167,7 +169,7 @@ const OrderFulfillPage: React.FC = ({ description="product's sku" /> - {warehouses.map(warehouse => ( + {warehouses?.map(warehouse => ( = ({ - {order?.lines.map((line, lineIndex) => { + {renderCollection(order?.lines, (line, lineIndex) => { + if (!line) { + return ( + + + + + + + + {warehouses?.map(() => ( + + + + ))} + + {" "} + + + + ); + } + const remainingQuantity = line.quantity - line.quantityFulfilled; const quantityToFulfill = formsetData[ @@ -216,7 +240,7 @@ const OrderFulfillPage: React.FC = ({ {line.variant.sku} - {warehouses.map(warehouse => { + {warehouses?.map(warehouse => { const warehouseStock = line.variant.stocks.find( stock => stock.warehouse.id === warehouse.id ); diff --git a/src/orders/index.tsx b/src/orders/index.tsx index 608cba793..c8db1246e 100644 --- a/src/orders/index.tsx +++ b/src/orders/index.tsx @@ -14,9 +14,11 @@ import { orderPath, OrderUrlQueryParams, OrderDraftListUrlSortField, - OrderListUrlSortField + OrderListUrlSortField, + orderFulfillPath } from "./urls"; import OrderDetailsComponent from "./views/OrderDetails"; +import OrderFulfillComponent from "./views/OrderFulfill"; import OrderDraftListComponent from "./views/OrderDraftList"; import OrderListComponent from "./views/OrderList"; @@ -57,6 +59,10 @@ const OrderDetails: React.FC> = ({ ); }; +const OrderFulfill: React.FC> = ({ match }) => ( + +); + const Component = () => { const intl = useIntl(); @@ -66,6 +72,7 @@ const Component = () => { + diff --git a/src/orders/urls.ts b/src/orders/urls.ts index c8e7e3af7..d500f7f12 100644 --- a/src/orders/urls.ts +++ b/src/orders/urls.ts @@ -97,10 +97,14 @@ export type OrderUrlDialog = | "edit-shipping" | "edit-shipping-address" | "finalize" - | "fulfill" | "mark-paid" | "refund" | "void"; export type OrderUrlQueryParams = Dialog & SingleAction; export const orderUrl = (id: string, params?: OrderUrlQueryParams) => orderPath(encodeURIComponent(id)) + "?" + stringifyQs(params); + +export const orderFulfillPath = (id: string) => + urlJoin(orderPath(id), "fulfill"); +export const orderFulfillUrl = (id: string) => + orderFulfillPath(encodeURIComponent(id)); diff --git a/src/orders/views/OrderDetails/index.tsx b/src/orders/views/OrderDetails/index.tsx index 928c44239..67fb571ff 100644 --- a/src/orders/views/OrderDetails/index.tsx +++ b/src/orders/views/OrderDetails/index.tsx @@ -26,7 +26,6 @@ import OrderDraftFinalizeDialog, { } from "../../components/OrderDraftFinalizeDialog"; import OrderDraftPage from "../../components/OrderDraftPage"; import OrderFulfillmentCancelDialog from "../../components/OrderFulfillmentCancelDialog"; -import OrderFulfillmentDialog from "../../components/OrderFulfillmentDialog"; import OrderFulfillmentTrackingDialog from "../../components/OrderFulfillmentTrackingDialog"; import OrderMarkAsPaidDialog from "../../components/OrderMarkAsPaidDialog/OrderMarkAsPaidDialog"; import OrderPaymentDialog from "../../components/OrderPaymentDialog"; @@ -40,7 +39,8 @@ import { orderListUrl, orderUrl, OrderUrlQueryParams, - OrderUrlDialog + OrderUrlDialog, + orderFulfillUrl } from "../../urls"; import { OrderDetailsMessages } from "./OrderDetailsMessages"; @@ -154,7 +154,6 @@ export const OrderDetails: React.FC = ({ id, params }) => { {({ orderAddNote, orderCancel, - orderCreateFulfillment, orderDraftUpdate, orderLinesAdd, orderLineDelete, @@ -201,7 +200,7 @@ export const OrderDetails: React.FC = ({ id, params }) => { )} userPermissions={user?.userPermissions || []} onOrderCancel={() => openModal("cancel")} - onOrderFulfill={() => openModal("fulfill")} + onOrderFulfill={() => navigate(orderFulfillUrl(id))} onFulfillmentCancel={fulfillmentId => navigate( orderUrl(id, { @@ -305,38 +304,6 @@ export const OrderDetails: React.FC = ({ id, params }) => { }) } /> - 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 - }) - } - /> = ({ orderId }) => { + const navigate = useNavigator(); + const { data, loading } = useOrderFulfillData({ + displayLoader: true, + variables: { + orderId + } + }); + const { data: warehouseData, loading: warehousesLoading } = useWarehouseList({ + displayLoader: true, + variables: { + first: 20 + } + }); + + return ( + navigate(orderUrl(orderId))} + onSubmit={() => undefined} + order={data?.order} + saveButtonBar="default" + warehouses={warehouseData?.warehouses.edges.map(edge => edge.node)} + /> + ); +}; + +OrderFulfill.displayName = "OrderFulfill"; +export default OrderFulfill; diff --git a/src/orders/views/OrderFulfill/index.ts b/src/orders/views/OrderFulfill/index.ts index e69de29bb..62368b27d 100644 --- a/src/orders/views/OrderFulfill/index.ts +++ b/src/orders/views/OrderFulfill/index.ts @@ -0,0 +1,2 @@ +export * from "./OrderFulfill"; +export { default } from "./OrderFulfill"; From 0f52e427cbecae73b9dfb1a4eb9216e8248cb975 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Mon, 20 Apr 2020 19:24:54 +0200 Subject: [PATCH 08/19] Add back button --- .../OrderFulfillPage/OrderFulfillPage.tsx | 17 ++++++++ .../views/OrderFulfill/OrderFulfill.tsx | 39 +++++++++++++++---- 2 files changed, 48 insertions(+), 8 deletions(-) diff --git a/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx b/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx index 2e6ff2c74..fe3977e45 100644 --- a/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx +++ b/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx @@ -27,6 +27,7 @@ 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"; const useStyles = makeStyles( theme => ({ @@ -136,6 +137,22 @@ const OrderFulfillPage: React.FC = ({ return ( + + {order?.number + ? intl.formatMessage( + { + defaultMessage: "Order #{orderNumber}", + description: "page header with order number" + }, + { + orderNumber: order.number + } + ) + : intl.formatMessage({ + defaultMessage: "Order", + description: "page header" + })} + = ({ orderId }) => { const navigate = useNavigator(); + const intl = useIntl(); const { data, loading } = useOrderFulfillData({ displayLoader: true, variables: { @@ -26,14 +29,34 @@ const OrderFulfill: React.FC = ({ orderId }) => { }); return ( - navigate(orderUrl(orderId))} - onSubmit={() => undefined} - order={data?.order} - saveButtonBar="default" - warehouses={warehouseData?.warehouses.edges.map(edge => edge.node)} - /> + <> + + navigate(orderUrl(orderId))} + onSubmit={() => undefined} + order={data?.order} + saveButtonBar="default" + warehouses={warehouseData?.warehouses.edges.map(edge => edge.node)} + /> + ); }; From c4fdfd2498fff14b5e5c9f6adc06ee9266ba8605 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Mon, 20 Apr 2020 19:29:00 +0200 Subject: [PATCH 09/19] Update stories --- .../__snapshots__/Stories.test.ts.snap | 853 ++++++++++++++++++ 1 file changed, 853 insertions(+) diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap index 414ab8bd1..8377e828e 100644 --- a/src/storybook/__snapshots__/Stories.test.ts.snap +++ b/src/storybook/__snapshots__/Stories.test.ts.snap @@ -64308,6 +64308,859 @@ exports[`Storyshots Views / Orders / Draft order list when no data 1`] = ` `; +exports[`Storyshots Views / Orders / Fulfill order default 1`] = ` +
+
+
+
+ Order no. 9123 - Add Fulfillment +
+
+
+
+
+
+
+
+ + Items ready to ship + +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Product name + + SKU + + C our wares + + Be stocked + + A Warehouse + + Darkwares + + Quantity to fulfill +
+
+
+ +
+
+ T-Shirt +
+ S +
+
+
+ 		+ 62783187 + +
+
+
+ + +
+
+
+ / 1217 +
+
+ 		+
+
+
+ + +
+
+
+ / 1217 +
+
+ 		+
+
+
+ + +
+
+
+ / 1217 +
+
+ 		+
+
+
+ + +
+
+
+ / 1220 +
+
+ 		+ + 0 + + / 2 +
+
+
+ +
+
+ Lemon Juice +
+ 2.5l +
+
+
+ 		+ 998323583 + + No Stock + +
+
+
+ + +
+
+
+ / 760 +
+
+ 		+
+
+
+ + +
+
+
+ / 760 +
+
+ 		+
+
+
+ + +
+
+
+ / 760 +
+
+ 		+ + 0 + + / 4 +
+
+
+ +
+
+ Orange Juice +
+ 5l +
+
+
+ 		+ 998323584 + +
+
+
+ + +
+
+
+ / 587 +
+
+ 		+ No Stock + +
+
+
+ + +
+
+
+ / 587 +
+
+ 		+ No Stock + + + 0 + + / 1 +
+
+
+ +
+
+ +
+
+`; + +exports[`Storyshots Views / Orders / Fulfill order loading 1`] = ` +
+
+
+
+ Order no. - Add Fulfillment +
+
+
+
+
+
+
+
+ + Items ready to ship + +
+
+
+
+
+ + + + + + + + + + + + + + + +
+ Product name + + SKU + + Quantity to fulfill +
+
+
+ +
+
+ + ‌ + +
+
+ 		+ + ‌ + + + + + ‌ + +
+
+
+ +
+
+ +
+
+`; + exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
Date: Tue, 21 Apr 2020 13:13:39 +0200 Subject: [PATCH 10/19] Use quantityAllocated --- .../OrderFulfillPage/OrderFulfillPage.tsx | 11 +++++--- .../components/OrderFulfillPage/fixtures.ts | 27 ++++++++++++------- src/orders/queries.ts | 1 + src/orders/types/OrderFulfillData.ts | 1 + .../__snapshots__/Stories.test.ts.snap | 16 +++++------ 5 files changed, 35 insertions(+), 21 deletions(-) diff --git a/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx b/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx index fe3977e45..a0c30050d 100644 --- a/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx +++ b/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx @@ -232,7 +232,7 @@ const OrderFulfillPage: React.FC = ({ lineIndex ].value.reduce( (quantityToFulfill, lineInput) => - quantityToFulfill + lineInput.quantity, + quantityToFulfill + (lineInput.quantity || 0), 0 ); const overfulfill = remainingQuantity < quantityToFulfill; @@ -281,6 +281,10 @@ const OrderFulfillPage: React.FC = ({ ); } + const availableQuantity = + warehouseStock.quantity - + warehouseStock.quantityAllocated; + return (
@@ -312,12 +316,11 @@ const OrderFulfillPage: React.FC = ({ } error={ overfulfill || - formsetStock.quantity > - warehouseStock.quantity + formsetStock.quantity > availableQuantity } />
- / {warehouseStock.quantity} + / {availableQuantity}
diff --git a/src/orders/components/OrderFulfillPage/fixtures.ts b/src/orders/components/OrderFulfillPage/fixtures.ts index 1e72213aa..fdb2857bc 100644 --- a/src/orders/components/OrderFulfillPage/fixtures.ts +++ b/src/orders/components/OrderFulfillPage/fixtures.ts @@ -37,25 +37,29 @@ export const orderToFulfill: OrderFulfillData_order = { __typename: "Stock", id: "U3RvY2s6NTIy", warehouse: warehouseList[0], - quantity: 1217 + quantity: 1217, + quantityAllocated: 10 }, { __typename: "Stock", id: "U3RvY2s6NTIx", warehouse: warehouseList[1], - quantity: 1217 + quantity: 1217, + quantityAllocated: 20 }, { __typename: "Stock", id: "U3RvY2s6NTIz", warehouse: warehouseList[2], - quantity: 1217 + quantity: 1217, + quantityAllocated: 4 }, { __typename: "Stock", id: "U3RvY2s6NTI0", warehouse: warehouseList[3], - quantity: 1220 + quantity: 1220, + quantityAllocated: 7 } ] }, @@ -93,19 +97,22 @@ export const orderToFulfill: OrderFulfillData_order = { __typename: "Stock", id: "U3RvY2s6NTI=", warehouse: warehouseList[1], - quantity: 760 + quantity: 760, + quantityAllocated: 2 }, { __typename: "Stock", id: "U3RvY2s6NTE=", warehouse: warehouseList[2], - quantity: 760 + quantity: 760, + quantityAllocated: 33 }, { __typename: "Stock", id: "U3RvY2s6NTM=", warehouse: warehouseList[3], - quantity: 760 + quantity: 760, + quantityAllocated: 4 } ] }, @@ -143,13 +150,15 @@ export const orderToFulfill: OrderFulfillData_order = { __typename: "Stock", id: "U3RvY2s6NTc=", warehouse: warehouseList[0], - quantity: 587 + quantity: 587, + quantityAllocated: 0 }, { __typename: "Stock", id: "U3RvY2s6NTY=", warehouse: warehouseList[2], - quantity: 587 + quantity: 587, + quantityAllocated: 1 } ] }, diff --git a/src/orders/queries.ts b/src/orders/queries.ts index 4089d9ded..8ecb5ff8d 100644 --- a/src/orders/queries.ts +++ b/src/orders/queries.ts @@ -365,6 +365,7 @@ const orderFulfillData = gql` id } quantity + quantityAllocated } } thumbnail(size: 64) { diff --git a/src/orders/types/OrderFulfillData.ts b/src/orders/types/OrderFulfillData.ts index b9fbf9bf4..1bc8412b8 100644 --- a/src/orders/types/OrderFulfillData.ts +++ b/src/orders/types/OrderFulfillData.ts @@ -27,6 +27,7 @@ export interface OrderFulfillData_order_lines_variant_stocks { id: string; warehouse: OrderFulfillData_order_lines_variant_stocks_warehouse; quantity: number; + quantityAllocated: number; } export interface OrderFulfillData_order_lines_variant { diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap index 8377e828e..5f068e403 100644 --- a/src/storybook/__snapshots__/Stories.test.ts.snap +++ b/src/storybook/__snapshots__/Stories.test.ts.snap @@ -64486,7 +64486,7 @@ exports[`Storyshots Views / Orders / Fulfill order default 1`] = `
- / 1217 + / 1207
@@ -64530,7 +64530,7 @@ exports[`Storyshots Views / Orders / Fulfill order default 1`] = `
- / 1217 + / 1197
@@ -64574,7 +64574,7 @@ exports[`Storyshots Views / Orders / Fulfill order default 1`] = `
- / 1217 + / 1213
@@ -64618,7 +64618,7 @@ exports[`Storyshots Views / Orders / Fulfill order default 1`] = `
- / 1220 + / 1213
@@ -64712,7 +64712,7 @@ exports[`Storyshots Views / Orders / Fulfill order default 1`] = `
- / 760 + / 758
@@ -64756,7 +64756,7 @@ exports[`Storyshots Views / Orders / Fulfill order default 1`] = `
- / 760 + / 727
@@ -64800,7 +64800,7 @@ exports[`Storyshots Views / Orders / Fulfill order default 1`] = `
- / 760 + / 756
@@ -64889,7 +64889,7 @@ exports[`Storyshots Views / Orders / Fulfill order default 1`] = `
- / 587 + / 586
From 0c09d4b11dad45558133130aeb3bf9de78689012 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Wed, 22 Apr 2020 00:03:23 +0200 Subject: [PATCH 11/19] wip --- src/orders/mutations.ts | 18 ++ src/orders/types/FulfillOrder.ts | 282 ++++++++++++++++++ .../views/OrderFulfill/OrderFulfill.tsx | 30 +- 3 files changed, 328 insertions(+), 2 deletions(-) create mode 100644 src/orders/types/FulfillOrder.ts diff --git a/src/orders/mutations.ts b/src/orders/mutations.ts index 3ee96f82e..8966ac6a1 100644 --- a/src/orders/mutations.ts +++ b/src/orders/mutations.ts @@ -22,6 +22,7 @@ import { OrderDraftBulkCancel, OrderDraftBulkCancelVariables } from "./types/OrderDraftBulkCancel"; +import { FulfillOrder, FulfillOrderVariables } from "./types/FulfillOrder"; import { OrderDraftCancel, OrderDraftCancelVariables @@ -477,3 +478,20 @@ export const TypedOrderLineUpdateMutation = TypedMutation< OrderLineUpdate, OrderLineUpdateVariables >(orderLineUpdateMutation); + +const fulfillOrder = gql` + mutation FulfillOrder($orderId: ID!, $input: FulfillmentCreateInput!) { + orderFulfillmentCreate(order: $orderId, input: $input) { + errors: orderErrors { + ...OrderErrorFragment + } + order { + ...OrderDetailsFragment + } + } + } +`; +export const useOrderFulfill = makeMutation< + FulfillOrder, + FulfillOrderVariables +>(fulfillOrder); diff --git a/src/orders/types/FulfillOrder.ts b/src/orders/types/FulfillOrder.ts new file mode 100644 index 000000000..0764dc429 --- /dev/null +++ b/src/orders/types/FulfillOrder.ts @@ -0,0 +1,282 @@ +/* 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: FulfillOrder +// ==================================================== + +export interface FulfillOrder_orderFulfillmentCreate_errors { + __typename: "OrderError"; + code: OrderErrorCode; + field: string | null; +} + +export interface FulfillOrder_orderFulfillmentCreate_order_billingAddress_country { + __typename: "CountryDisplay"; + code: string; + country: string; +} + +export interface FulfillOrder_orderFulfillmentCreate_order_billingAddress { + __typename: "Address"; + city: string; + cityArea: string; + companyName: string; + country: FulfillOrder_orderFulfillmentCreate_order_billingAddress_country; + countryArea: string; + firstName: string; + id: string; + lastName: string; + phone: string | null; + postalCode: string; + streetAddress1: string; + streetAddress2: string; +} + +export interface FulfillOrder_orderFulfillmentCreate_order_events_user { + __typename: "User"; + id: string; + email: string; +} + +export interface FulfillOrder_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: FulfillOrder_orderFulfillmentCreate_order_events_user | null; +} + +export interface FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines_orderLine_unitPrice_gross { + __typename: "Money"; + amount: number; + currency: string; +} + +export interface FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines_orderLine_unitPrice_net { + __typename: "Money"; + amount: number; + currency: string; +} + +export interface FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines_orderLine_unitPrice { + __typename: "TaxedMoney"; + gross: FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines_orderLine_unitPrice_gross; + net: FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines_orderLine_unitPrice_net; +} + +export interface FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines_orderLine_thumbnail { + __typename: "Image"; + url: string; +} + +export interface FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines_orderLine { + __typename: "OrderLine"; + id: string; + isShippingRequired: boolean; + productName: string; + productSku: string; + quantity: number; + quantityFulfilled: number; + unitPrice: FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines_orderLine_unitPrice | null; + thumbnail: FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines_orderLine_thumbnail | null; +} + +export interface FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines { + __typename: "FulfillmentLine"; + id: string; + quantity: number; + orderLine: FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines_orderLine | null; +} + +export interface FulfillOrder_orderFulfillmentCreate_order_fulfillments { + __typename: "Fulfillment"; + id: string; + lines: (FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines | null)[] | null; + fulfillmentOrder: number; + status: FulfillmentStatus; + trackingNumber: string; +} + +export interface FulfillOrder_orderFulfillmentCreate_order_lines_unitPrice_gross { + __typename: "Money"; + amount: number; + currency: string; +} + +export interface FulfillOrder_orderFulfillmentCreate_order_lines_unitPrice_net { + __typename: "Money"; + amount: number; + currency: string; +} + +export interface FulfillOrder_orderFulfillmentCreate_order_lines_unitPrice { + __typename: "TaxedMoney"; + gross: FulfillOrder_orderFulfillmentCreate_order_lines_unitPrice_gross; + net: FulfillOrder_orderFulfillmentCreate_order_lines_unitPrice_net; +} + +export interface FulfillOrder_orderFulfillmentCreate_order_lines_thumbnail { + __typename: "Image"; + url: string; +} + +export interface FulfillOrder_orderFulfillmentCreate_order_lines { + __typename: "OrderLine"; + id: string; + isShippingRequired: boolean; + productName: string; + productSku: string; + quantity: number; + quantityFulfilled: number; + unitPrice: FulfillOrder_orderFulfillmentCreate_order_lines_unitPrice | null; + thumbnail: FulfillOrder_orderFulfillmentCreate_order_lines_thumbnail | null; +} + +export interface FulfillOrder_orderFulfillmentCreate_order_shippingAddress_country { + __typename: "CountryDisplay"; + code: string; + country: string; +} + +export interface FulfillOrder_orderFulfillmentCreate_order_shippingAddress { + __typename: "Address"; + city: string; + cityArea: string; + companyName: string; + country: FulfillOrder_orderFulfillmentCreate_order_shippingAddress_country; + countryArea: string; + firstName: string; + id: string; + lastName: string; + phone: string | null; + postalCode: string; + streetAddress1: string; + streetAddress2: string; +} + +export interface FulfillOrder_orderFulfillmentCreate_order_shippingMethod { + __typename: "ShippingMethod"; + id: string; +} + +export interface FulfillOrder_orderFulfillmentCreate_order_shippingPrice_gross { + __typename: "Money"; + amount: number; + currency: string; +} + +export interface FulfillOrder_orderFulfillmentCreate_order_shippingPrice { + __typename: "TaxedMoney"; + gross: FulfillOrder_orderFulfillmentCreate_order_shippingPrice_gross; +} + +export interface FulfillOrder_orderFulfillmentCreate_order_subtotal_gross { + __typename: "Money"; + amount: number; + currency: string; +} + +export interface FulfillOrder_orderFulfillmentCreate_order_subtotal { + __typename: "TaxedMoney"; + gross: FulfillOrder_orderFulfillmentCreate_order_subtotal_gross; +} + +export interface FulfillOrder_orderFulfillmentCreate_order_total_gross { + __typename: "Money"; + amount: number; + currency: string; +} + +export interface FulfillOrder_orderFulfillmentCreate_order_total_tax { + __typename: "Money"; + amount: number; + currency: string; +} + +export interface FulfillOrder_orderFulfillmentCreate_order_total { + __typename: "TaxedMoney"; + gross: FulfillOrder_orderFulfillmentCreate_order_total_gross; + tax: FulfillOrder_orderFulfillmentCreate_order_total_tax; +} + +export interface FulfillOrder_orderFulfillmentCreate_order_totalAuthorized { + __typename: "Money"; + amount: number; + currency: string; +} + +export interface FulfillOrder_orderFulfillmentCreate_order_totalCaptured { + __typename: "Money"; + amount: number; + currency: string; +} + +export interface FulfillOrder_orderFulfillmentCreate_order_user { + __typename: "User"; + id: string; + email: string; +} + +export interface FulfillOrder_orderFulfillmentCreate_order_availableShippingMethods_price { + __typename: "Money"; + amount: number; + currency: string; +} + +export interface FulfillOrder_orderFulfillmentCreate_order_availableShippingMethods { + __typename: "ShippingMethod"; + id: string; + name: string; + price: FulfillOrder_orderFulfillmentCreate_order_availableShippingMethods_price | null; +} + +export interface FulfillOrder_orderFulfillmentCreate_order { + __typename: "Order"; + id: string; + billingAddress: FulfillOrder_orderFulfillmentCreate_order_billingAddress | null; + canFinalize: boolean; + created: any; + customerNote: string; + events: (FulfillOrder_orderFulfillmentCreate_order_events | null)[] | null; + fulfillments: (FulfillOrder_orderFulfillmentCreate_order_fulfillments | null)[]; + lines: (FulfillOrder_orderFulfillmentCreate_order_lines | null)[]; + number: string | null; + paymentStatus: PaymentChargeStatusEnum | null; + shippingAddress: FulfillOrder_orderFulfillmentCreate_order_shippingAddress | null; + shippingMethod: FulfillOrder_orderFulfillmentCreate_order_shippingMethod | null; + shippingMethodName: string | null; + shippingPrice: FulfillOrder_orderFulfillmentCreate_order_shippingPrice | null; + status: OrderStatus; + subtotal: FulfillOrder_orderFulfillmentCreate_order_subtotal | null; + total: FulfillOrder_orderFulfillmentCreate_order_total | null; + actions: (OrderAction | null)[]; + totalAuthorized: FulfillOrder_orderFulfillmentCreate_order_totalAuthorized | null; + totalCaptured: FulfillOrder_orderFulfillmentCreate_order_totalCaptured | null; + user: FulfillOrder_orderFulfillmentCreate_order_user | null; + userEmail: string | null; + availableShippingMethods: (FulfillOrder_orderFulfillmentCreate_order_availableShippingMethods | null)[] | null; +} + +export interface FulfillOrder_orderFulfillmentCreate { + __typename: "FulfillmentCreate"; + errors: FulfillOrder_orderFulfillmentCreate_errors[]; + order: FulfillOrder_orderFulfillmentCreate_order | null; +} + +export interface FulfillOrder { + orderFulfillmentCreate: FulfillOrder_orderFulfillmentCreate | null; +} + +export interface FulfillOrderVariables { + orderId: string; + input: FulfillmentCreateInput; +} diff --git a/src/orders/views/OrderFulfill/OrderFulfill.tsx b/src/orders/views/OrderFulfill/OrderFulfill.tsx index 01fcb5b9f..b1a50bbd7 100644 --- a/src/orders/views/OrderFulfill/OrderFulfill.tsx +++ b/src/orders/views/OrderFulfill/OrderFulfill.tsx @@ -7,6 +7,8 @@ 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; @@ -14,6 +16,7 @@ export interface OrderFulfillProps { const OrderFulfill: React.FC = ({ orderId }) => { const navigate = useNavigator(); + const notify = useNotifier(); const intl = useIntl(); const { data, loading } = useOrderFulfillData({ displayLoader: true, @@ -27,6 +30,19 @@ const OrderFulfill: React.FC = ({ orderId }) => { first: 20 } }); + const [fulfillOrder, fulfillOrderOpts] = useOrderFulfill({ + onCompleted: data => { + if (data.orderFulfillmentCreate.errors.length === 0) { + navigate(orderUrl(orderId)); + notify({ + text: intl.formatMessage({ + defaultMessage: "Fulfilled Items", + description: "order fulfilled success message" + }) + }); + } + } + }); return ( <> @@ -49,9 +65,19 @@ const OrderFulfill: React.FC = ({ orderId }) => { } /> navigate(orderUrl(orderId))} - onSubmit={() => undefined} + onSubmit={formData => + fulfillOrder({ + variables: { + input: { + lines: formData.items.map(line => line.value), + notifyCustomer: formData.sendInfo + }, + orderId + } + }) + } order={data?.order} saveButtonBar="default" warehouses={warehouseData?.warehouses.edges.map(edge => edge.node)} From 3922b315d555a87ff9f35898bc3791e7619fe1fc Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Fri, 24 Apr 2020 13:56:28 +0200 Subject: [PATCH 12/19] Hook up components with API --- .../OrderFulfillPage/OrderFulfillPage.tsx | 327 ++++++++++-------- src/orders/containers/OrderOperations.tsx | 226 ++++++------ src/orders/mutations.ts | 32 +- src/orders/types/FulfillOrder.ts | 142 ++++---- src/orders/types/OrderCreateFulfillment.ts | 282 --------------- .../OrderDetails/OrderDetailsMessages.tsx | 14 - src/orders/views/OrderDetails/index.tsx | 3 - .../views/OrderFulfill/OrderFulfill.tsx | 7 +- src/types/globalTypes.ts | 30 +- 9 files changed, 375 insertions(+), 688 deletions(-) delete mode 100644 src/orders/types/OrderCreateFulfillment.ts diff --git a/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx b/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx index a0c30050d..88d6fe49b 100644 --- a/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx +++ b/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx @@ -11,7 +11,7 @@ import classNames from "classnames"; import Typography from "@material-ui/core/Typography"; import useFormset, { FormsetData } from "@saleor/hooks/useFormset"; -import { StockInput } from "@saleor/types/globalTypes"; +import { OrderFulfillStockInput } from "@saleor/types/globalTypes"; import { WarehouseFragment } from "@saleor/warehouses/types/WarehouseFragment"; import TableCellAvatar from "@saleor/components/TableCellAvatar"; import Container from "@saleor/components/Container"; @@ -19,7 +19,10 @@ 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 } from "@saleor/orders/types/OrderFulfillData"; +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"; @@ -36,23 +39,25 @@ const useStyles = makeStyles( paddingLeft: theme.spacing(2) + 2 }, colName: { - width: 300 + width: 250 }, colQuantity: { - textAlign: "right", width: 210 }, colQuantityContent: { alignItems: "center", display: "inline-flex" }, + colQuantityHeader: { + textAlign: "right" + }, colQuantityTotal: { textAlign: "right", width: 180 }, colSku: { textAlign: "right", - width: 120 + width: 150 }, error: { color: theme.palette.error.main @@ -82,7 +87,7 @@ interface OrderFulfillFormData { sendInfo: boolean; } interface OrderFulfillSubmitData extends OrderFulfillFormData { - items: FormsetData; + items: FormsetData; } export interface OrderFulfillPageProps { disabled: boolean; @@ -97,6 +102,10 @@ const initialFormData: OrderFulfillFormData = { sendInfo: true }; +function getRemainingQuantity(line: OrderFulfillData_order_lines): number { + return line.quantity - line.quantityFulfilled; +} + const OrderFulfillPage: React.FC = ({ disabled, order, @@ -110,23 +119,25 @@ const OrderFulfillPage: React.FC = ({ const { change: formsetChange, data: formsetData } = useFormset< null, - StockInput[] + OrderFulfillStockInput[] >( - order?.lines.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 + 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) => @@ -189,7 +200,10 @@ const OrderFulfillPage: React.FC = ({ {warehouses?.map(warehouse => ( {warehouse.name} @@ -203,144 +217,151 @@ const OrderFulfillPage: React.FC = ({ - {renderCollection(order?.lines, (line, lineIndex) => { - if (!line) { - return ( - - - - - - - - {warehouses?.map(() => ( - + {renderCollection( + order?.lines.filter(line => getRemainingQuantity(line) > 0), + (line, lineIndex) => { + if (!line) { + return ( + + + + + - ))} + {warehouses?.map(warehouse => ( + + + + ))} + + {" "} + + + + ); + } + + const remainingQuantity = getRemainingQuantity(line); + const quantityToFulfill = formsetData[ + lineIndex + ].value.reduce( + (quantityToFulfill, lineInput) => + quantityToFulfill + (lineInput.quantity || 0), + 0 + ); + const overfulfill = remainingQuantity < quantityToFulfill; + + return ( + + + {line.productName} + + {line.variant.attributes + .map(attribute => + attribute.values + .map(attributeValue => attributeValue.name) + .join(", ") + ) + .join(" / ")} + + + + {line.variant.sku} + + {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 ( + + + + ); + } + + const availableQuantity = + warehouseStock.quantity - + warehouseStock.quantityAllocated; + + return ( + +
+ + 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 + } + /> +
+ / {availableQuantity} +
+
+ + ); + })} - {" "} - + + {quantityToFulfill} + {" "} + / {remainingQuantity} ); } - - const remainingQuantity = - line.quantity - line.quantityFulfilled; - const quantityToFulfill = formsetData[ - lineIndex - ].value.reduce( - (quantityToFulfill, lineInput) => - quantityToFulfill + (lineInput.quantity || 0), - 0 - ); - const overfulfill = remainingQuantity < quantityToFulfill; - - return ( - - - {line.productName} - - {line.variant.attributes - .map(attribute => - attribute.values - .map(attributeValue => attributeValue.name) - .join(", ") - ) - .join(" / ")} - - - - {line.variant.sku} - - {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 ( - - - - ); - } - - const availableQuantity = - warehouseStock.quantity - - warehouseStock.quantityAllocated; - - return ( - -
- - 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 - } - /> -
- / {availableQuantity} -
-
- - ); - })} - - - {quantityToFulfill} - {" "} - / {remainingQuantity} - - - ); - })} + )} diff --git a/src/orders/containers/OrderOperations.tsx b/src/orders/containers/OrderOperations.tsx index ca6c727d9..c134b21aa 100644 --- a/src/orders/containers/OrderOperations.tsx +++ b/src/orders/containers/OrderOperations.tsx @@ -6,7 +6,6 @@ import { TypedOrderAddNoteMutation, TypedOrderCancelMutation, TypedOrderCaptureMutation, - TypedOrderCreateFulfillmentMutation, TypedOrderDraftCancelMutation, TypedOrderDraftFinalizeMutation, TypedOrderDraftUpdateMutation, @@ -24,10 +23,6 @@ import { import { OrderAddNote, OrderAddNoteVariables } from "../types/OrderAddNote"; import { OrderCancel, OrderCancelVariables } from "../types/OrderCancel"; import { OrderCapture, OrderCaptureVariables } from "../types/OrderCapture"; -import { - OrderCreateFulfillment, - OrderCreateFulfillmentVariables -} from "../types/OrderCreateFulfillment"; import { OrderDraftCancel, OrderDraftCancelVariables @@ -80,10 +75,6 @@ interface OrderOperationsProps { OrderCancel, OrderCancelVariables >; - orderCreateFulfillment: PartialMutationProviderOutput< - OrderCreateFulfillment, - OrderCreateFulfillmentVariables - >; orderFulfillmentCancel: PartialMutationProviderOutput< OrderFulfillmentCancel, OrderFulfillmentCancelVariables @@ -139,7 +130,6 @@ interface OrderOperationsProps { >; }) => React.ReactNode; onOrderFulfillmentCancel: (data: OrderFulfillmentCancel) => void; - onOrderFulfillmentCreate: (data: OrderCreateFulfillment) => void; onOrderFulfillmentUpdate: (data: OrderFulfillmentUpdateTracking) => void; onOrderCancel: (data: OrderCancel) => void; onOrderVoid: (data: OrderVoid) => void; @@ -160,7 +150,6 @@ interface OrderOperationsProps { const OrderOperations: React.FC = ({ children, onDraftUpdate, - onOrderFulfillmentCreate, onNoteAdd, onOrderCancel, onOrderLinesAdd, @@ -185,151 +174,140 @@ const OrderOperations: React.FC = ({ {(...paymentCapture) => ( {(...paymentRefund) => ( - - {(...createFulfillment) => ( - - {(...addNote) => ( - - {(...update) => ( - + {(...addNote) => ( + + {(...update) => ( + + {(...updateDraft) => ( + - {(...updateDraft) => ( - ( + - {(...updateShippingMethod) => ( - ( + - {(...deleteOrderLine) => ( - ( + - {(...addOrderLine) => ( - ( + - {(...updateOrderLine) => ( - ( + - {(...cancelFulfillment) => ( - ( + - {( - ...updateTrackingNumber - ) => ( - ( + {( - ...finalizeDraft + ...cancelDraft ) => ( - {( - ...cancelDraft - ) => ( - - {( + ...markAsPaid + ) => + children({ + orderAddNote: getMutationProviderData( + ...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 - ) => - children({ - orderAddNote: getMutationProviderData( - ...addNote - ), - orderCancel: getMutationProviderData( - ...orderCancel - ), - orderCreateFulfillment: getMutationProviderData( - ...createFulfillment - ), - 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 - ), - orderPaymentRefund: getMutationProviderData( - ...paymentRefund - ), - orderShippingMethodUpdate: getMutationProviderData( - ...updateShippingMethod - ), - orderUpdate: getMutationProviderData( - ...update - ), - orderVoid: getMutationProviderData( - ...orderVoid - ) - }) - } - - )} - + ), + orderPaymentRefund: getMutationProviderData( + ...paymentRefund + ), + orderShippingMethodUpdate: getMutationProviderData( + ...updateShippingMethod + ), + orderUpdate: getMutationProviderData( + ...update + ), + orderVoid: getMutationProviderData( + ...orderVoid + ) + }) + } + )} - + )} - + )} - + )} - + )} - + )} - + )} - + )} - + )} - + )} - + )} - + )} )} diff --git a/src/orders/mutations.ts b/src/orders/mutations.ts index 8966ac6a1..ce0d09016 100644 --- a/src/orders/mutations.ts +++ b/src/orders/mutations.ts @@ -14,10 +14,6 @@ import { } from "./types/OrderBulkCancel"; import { OrderCancel, OrderCancelVariables } from "./types/OrderCancel"; import { OrderCapture, OrderCaptureVariables } from "./types/OrderCapture"; -import { - OrderCreateFulfillment, - OrderCreateFulfillmentVariables -} from "./types/OrderCreateFulfillment"; import { OrderDraftBulkCancel, OrderDraftBulkCancelVariables @@ -235,28 +231,6 @@ export const TypedOrderCaptureMutation = TypedMutation< OrderCaptureVariables >(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` ${fragmentOrderDetails} ${orderErrorFragment} @@ -480,8 +454,10 @@ export const TypedOrderLineUpdateMutation = TypedMutation< >(orderLineUpdateMutation); const fulfillOrder = gql` - mutation FulfillOrder($orderId: ID!, $input: FulfillmentCreateInput!) { - orderFulfillmentCreate(order: $orderId, input: $input) { + ${fragmentOrderDetails} + ${orderErrorFragment} + mutation FulfillOrder($orderId: ID!, $input: OrderFulfillInput!) { + orderFulfill(order: $orderId, input: $input) { errors: orderErrors { ...OrderErrorFragment } diff --git a/src/orders/types/FulfillOrder.ts b/src/orders/types/FulfillOrder.ts index 0764dc429..83ccc4bf4 100644 --- a/src/orders/types/FulfillOrder.ts +++ b/src/orders/types/FulfillOrder.ts @@ -2,30 +2,30 @@ /* eslint-disable */ // This file was automatically generated and should not be edited. -import { FulfillmentCreateInput, OrderErrorCode, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction } from "./../../types/globalTypes"; +import { OrderFulfillInput, OrderErrorCode, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction } from "./../../types/globalTypes"; // ==================================================== // GraphQL mutation operation: FulfillOrder // ==================================================== -export interface FulfillOrder_orderFulfillmentCreate_errors { +export interface FulfillOrder_orderFulfill_errors { __typename: "OrderError"; code: OrderErrorCode; field: string | null; } -export interface FulfillOrder_orderFulfillmentCreate_order_billingAddress_country { +export interface FulfillOrder_orderFulfill_order_billingAddress_country { __typename: "CountryDisplay"; code: string; country: string; } -export interface FulfillOrder_orderFulfillmentCreate_order_billingAddress { +export interface FulfillOrder_orderFulfill_order_billingAddress { __typename: "Address"; city: string; cityArea: string; companyName: string; - country: FulfillOrder_orderFulfillmentCreate_order_billingAddress_country; + country: FulfillOrder_orderFulfill_order_billingAddress_country; countryArea: string; firstName: string; id: string; @@ -36,13 +36,13 @@ export interface FulfillOrder_orderFulfillmentCreate_order_billingAddress { streetAddress2: string; } -export interface FulfillOrder_orderFulfillmentCreate_order_events_user { +export interface FulfillOrder_orderFulfill_order_events_user { __typename: "User"; id: string; email: string; } -export interface FulfillOrder_orderFulfillmentCreate_order_events { +export interface FulfillOrder_orderFulfill_order_events { __typename: "OrderEvent"; id: string; amount: number | null; @@ -52,33 +52,33 @@ export interface FulfillOrder_orderFulfillmentCreate_order_events { message: string | null; quantity: number | null; type: OrderEventsEnum | null; - user: FulfillOrder_orderFulfillmentCreate_order_events_user | null; + user: FulfillOrder_orderFulfill_order_events_user | null; } -export interface FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines_orderLine_unitPrice_gross { +export interface FulfillOrder_orderFulfill_order_fulfillments_lines_orderLine_unitPrice_gross { __typename: "Money"; amount: number; currency: string; } -export interface FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines_orderLine_unitPrice_net { +export interface FulfillOrder_orderFulfill_order_fulfillments_lines_orderLine_unitPrice_net { __typename: "Money"; amount: number; currency: string; } -export interface FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines_orderLine_unitPrice { +export interface FulfillOrder_orderFulfill_order_fulfillments_lines_orderLine_unitPrice { __typename: "TaxedMoney"; - gross: FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines_orderLine_unitPrice_gross; - net: FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines_orderLine_unitPrice_net; + gross: FulfillOrder_orderFulfill_order_fulfillments_lines_orderLine_unitPrice_gross; + net: FulfillOrder_orderFulfill_order_fulfillments_lines_orderLine_unitPrice_net; } -export interface FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines_orderLine_thumbnail { +export interface FulfillOrder_orderFulfill_order_fulfillments_lines_orderLine_thumbnail { __typename: "Image"; url: string; } -export interface FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines_orderLine { +export interface FulfillOrder_orderFulfill_order_fulfillments_lines_orderLine { __typename: "OrderLine"; id: string; isShippingRequired: boolean; @@ -86,50 +86,50 @@ export interface FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines_or productSku: string; quantity: number; quantityFulfilled: number; - unitPrice: FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines_orderLine_unitPrice | null; - thumbnail: FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines_orderLine_thumbnail | null; + unitPrice: FulfillOrder_orderFulfill_order_fulfillments_lines_orderLine_unitPrice | null; + thumbnail: FulfillOrder_orderFulfill_order_fulfillments_lines_orderLine_thumbnail | null; } -export interface FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines { +export interface FulfillOrder_orderFulfill_order_fulfillments_lines { __typename: "FulfillmentLine"; id: string; quantity: number; - orderLine: FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines_orderLine | null; + orderLine: FulfillOrder_orderFulfill_order_fulfillments_lines_orderLine | null; } -export interface FulfillOrder_orderFulfillmentCreate_order_fulfillments { +export interface FulfillOrder_orderFulfill_order_fulfillments { __typename: "Fulfillment"; id: string; - lines: (FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines | null)[] | null; + lines: (FulfillOrder_orderFulfill_order_fulfillments_lines | null)[] | null; fulfillmentOrder: number; status: FulfillmentStatus; trackingNumber: string; } -export interface FulfillOrder_orderFulfillmentCreate_order_lines_unitPrice_gross { +export interface FulfillOrder_orderFulfill_order_lines_unitPrice_gross { __typename: "Money"; amount: number; currency: string; } -export interface FulfillOrder_orderFulfillmentCreate_order_lines_unitPrice_net { +export interface FulfillOrder_orderFulfill_order_lines_unitPrice_net { __typename: "Money"; amount: number; currency: string; } -export interface FulfillOrder_orderFulfillmentCreate_order_lines_unitPrice { +export interface FulfillOrder_orderFulfill_order_lines_unitPrice { __typename: "TaxedMoney"; - gross: FulfillOrder_orderFulfillmentCreate_order_lines_unitPrice_gross; - net: FulfillOrder_orderFulfillmentCreate_order_lines_unitPrice_net; + gross: FulfillOrder_orderFulfill_order_lines_unitPrice_gross; + net: FulfillOrder_orderFulfill_order_lines_unitPrice_net; } -export interface FulfillOrder_orderFulfillmentCreate_order_lines_thumbnail { +export interface FulfillOrder_orderFulfill_order_lines_thumbnail { __typename: "Image"; url: string; } -export interface FulfillOrder_orderFulfillmentCreate_order_lines { +export interface FulfillOrder_orderFulfill_order_lines { __typename: "OrderLine"; id: string; isShippingRequired: boolean; @@ -137,22 +137,22 @@ export interface FulfillOrder_orderFulfillmentCreate_order_lines { productSku: string; quantity: number; quantityFulfilled: number; - unitPrice: FulfillOrder_orderFulfillmentCreate_order_lines_unitPrice | null; - thumbnail: FulfillOrder_orderFulfillmentCreate_order_lines_thumbnail | null; + unitPrice: FulfillOrder_orderFulfill_order_lines_unitPrice | null; + thumbnail: FulfillOrder_orderFulfill_order_lines_thumbnail | null; } -export interface FulfillOrder_orderFulfillmentCreate_order_shippingAddress_country { +export interface FulfillOrder_orderFulfill_order_shippingAddress_country { __typename: "CountryDisplay"; code: string; country: string; } -export interface FulfillOrder_orderFulfillmentCreate_order_shippingAddress { +export interface FulfillOrder_orderFulfill_order_shippingAddress { __typename: "Address"; city: string; cityArea: string; companyName: string; - country: FulfillOrder_orderFulfillmentCreate_order_shippingAddress_country; + country: FulfillOrder_orderFulfill_order_shippingAddress_country; countryArea: string; firstName: string; id: string; @@ -163,120 +163,120 @@ export interface FulfillOrder_orderFulfillmentCreate_order_shippingAddress { streetAddress2: string; } -export interface FulfillOrder_orderFulfillmentCreate_order_shippingMethod { +export interface FulfillOrder_orderFulfill_order_shippingMethod { __typename: "ShippingMethod"; id: string; } -export interface FulfillOrder_orderFulfillmentCreate_order_shippingPrice_gross { +export interface FulfillOrder_orderFulfill_order_shippingPrice_gross { __typename: "Money"; amount: number; currency: string; } -export interface FulfillOrder_orderFulfillmentCreate_order_shippingPrice { +export interface FulfillOrder_orderFulfill_order_shippingPrice { __typename: "TaxedMoney"; - gross: FulfillOrder_orderFulfillmentCreate_order_shippingPrice_gross; + gross: FulfillOrder_orderFulfill_order_shippingPrice_gross; } -export interface FulfillOrder_orderFulfillmentCreate_order_subtotal_gross { +export interface FulfillOrder_orderFulfill_order_subtotal_gross { __typename: "Money"; amount: number; currency: string; } -export interface FulfillOrder_orderFulfillmentCreate_order_subtotal { +export interface FulfillOrder_orderFulfill_order_subtotal { __typename: "TaxedMoney"; - gross: FulfillOrder_orderFulfillmentCreate_order_subtotal_gross; + gross: FulfillOrder_orderFulfill_order_subtotal_gross; } -export interface FulfillOrder_orderFulfillmentCreate_order_total_gross { +export interface FulfillOrder_orderFulfill_order_total_gross { __typename: "Money"; amount: number; currency: string; } -export interface FulfillOrder_orderFulfillmentCreate_order_total_tax { +export interface FulfillOrder_orderFulfill_order_total_tax { __typename: "Money"; amount: number; currency: string; } -export interface FulfillOrder_orderFulfillmentCreate_order_total { +export interface FulfillOrder_orderFulfill_order_total { __typename: "TaxedMoney"; - gross: FulfillOrder_orderFulfillmentCreate_order_total_gross; - tax: FulfillOrder_orderFulfillmentCreate_order_total_tax; + gross: FulfillOrder_orderFulfill_order_total_gross; + tax: FulfillOrder_orderFulfill_order_total_tax; } -export interface FulfillOrder_orderFulfillmentCreate_order_totalAuthorized { +export interface FulfillOrder_orderFulfill_order_totalAuthorized { __typename: "Money"; amount: number; currency: string; } -export interface FulfillOrder_orderFulfillmentCreate_order_totalCaptured { +export interface FulfillOrder_orderFulfill_order_totalCaptured { __typename: "Money"; amount: number; currency: string; } -export interface FulfillOrder_orderFulfillmentCreate_order_user { +export interface FulfillOrder_orderFulfill_order_user { __typename: "User"; id: string; email: string; } -export interface FulfillOrder_orderFulfillmentCreate_order_availableShippingMethods_price { +export interface FulfillOrder_orderFulfill_order_availableShippingMethods_price { __typename: "Money"; amount: number; currency: string; } -export interface FulfillOrder_orderFulfillmentCreate_order_availableShippingMethods { +export interface FulfillOrder_orderFulfill_order_availableShippingMethods { __typename: "ShippingMethod"; id: string; name: string; - price: FulfillOrder_orderFulfillmentCreate_order_availableShippingMethods_price | null; + price: FulfillOrder_orderFulfill_order_availableShippingMethods_price | null; } -export interface FulfillOrder_orderFulfillmentCreate_order { +export interface FulfillOrder_orderFulfill_order { __typename: "Order"; id: string; - billingAddress: FulfillOrder_orderFulfillmentCreate_order_billingAddress | null; + billingAddress: FulfillOrder_orderFulfill_order_billingAddress | null; canFinalize: boolean; created: any; customerNote: string; - events: (FulfillOrder_orderFulfillmentCreate_order_events | null)[] | null; - fulfillments: (FulfillOrder_orderFulfillmentCreate_order_fulfillments | null)[]; - lines: (FulfillOrder_orderFulfillmentCreate_order_lines | null)[]; + 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_orderFulfillmentCreate_order_shippingAddress | null; - shippingMethod: FulfillOrder_orderFulfillmentCreate_order_shippingMethod | null; + shippingAddress: FulfillOrder_orderFulfill_order_shippingAddress | null; + shippingMethod: FulfillOrder_orderFulfill_order_shippingMethod | null; shippingMethodName: string | null; - shippingPrice: FulfillOrder_orderFulfillmentCreate_order_shippingPrice | null; + shippingPrice: FulfillOrder_orderFulfill_order_shippingPrice | null; status: OrderStatus; - subtotal: FulfillOrder_orderFulfillmentCreate_order_subtotal | null; - total: FulfillOrder_orderFulfillmentCreate_order_total | null; + subtotal: FulfillOrder_orderFulfill_order_subtotal | null; + total: FulfillOrder_orderFulfill_order_total | null; actions: (OrderAction | null)[]; - totalAuthorized: FulfillOrder_orderFulfillmentCreate_order_totalAuthorized | null; - totalCaptured: FulfillOrder_orderFulfillmentCreate_order_totalCaptured | null; - user: FulfillOrder_orderFulfillmentCreate_order_user | null; + totalAuthorized: FulfillOrder_orderFulfill_order_totalAuthorized | null; + totalCaptured: FulfillOrder_orderFulfill_order_totalCaptured | null; + user: FulfillOrder_orderFulfill_order_user | null; userEmail: string | null; - availableShippingMethods: (FulfillOrder_orderFulfillmentCreate_order_availableShippingMethods | null)[] | null; + availableShippingMethods: (FulfillOrder_orderFulfill_order_availableShippingMethods | null)[] | null; } -export interface FulfillOrder_orderFulfillmentCreate { - __typename: "FulfillmentCreate"; - errors: FulfillOrder_orderFulfillmentCreate_errors[]; - order: FulfillOrder_orderFulfillmentCreate_order | null; +export interface FulfillOrder_orderFulfill { + __typename: "OrderFulfill"; + errors: FulfillOrder_orderFulfill_errors[]; + order: FulfillOrder_orderFulfill_order | null; } export interface FulfillOrder { - orderFulfillmentCreate: FulfillOrder_orderFulfillmentCreate | null; + orderFulfill: FulfillOrder_orderFulfill | null; } export interface FulfillOrderVariables { orderId: string; - input: FulfillmentCreateInput; + input: OrderFulfillInput; } diff --git a/src/orders/types/OrderCreateFulfillment.ts b/src/orders/types/OrderCreateFulfillment.ts deleted file mode 100644 index edc4d54f1..000000000 --- a/src/orders/types/OrderCreateFulfillment.ts +++ /dev/null @@ -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; -} diff --git a/src/orders/views/OrderDetails/OrderDetailsMessages.tsx b/src/orders/views/OrderDetails/OrderDetailsMessages.tsx index c9b5b9f00..a2162928f 100644 --- a/src/orders/views/OrderDetails/OrderDetailsMessages.tsx +++ b/src/orders/views/OrderDetails/OrderDetailsMessages.tsx @@ -7,7 +7,6 @@ import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandl import { OrderAddNote } from "../../types/OrderAddNote"; import { OrderCancel } from "../../types/OrderCancel"; import { OrderCapture } from "../../types/OrderCapture"; -import { OrderCreateFulfillment } from "../../types/OrderCreateFulfillment"; import { OrderDraftCancel } from "../../types/OrderDraftCancel"; import { OrderDraftFinalize } from "../../types/OrderDraftFinalize"; import { OrderDraftUpdate } from "../../types/OrderDraftUpdate"; @@ -31,7 +30,6 @@ interface OrderDetailsMessages { handleNoteAdd: (data: OrderAddNote) => void; handleOrderCancel: (data: OrderCancel) => void; handleOrderFulfillmentCancel: (data: OrderFulfillmentCancel) => void; - handleOrderFulfillmentCreate: (data: OrderCreateFulfillment) => void; handleOrderFulfillmentUpdate: ( data: OrderFulfillmentUpdateTracking ) => void; @@ -86,17 +84,6 @@ export const OrderDetailsMessages: React.FC = ({ 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 errs = data.orderMarkAsPaid?.errors; if (errs.length === 0) { @@ -256,7 +243,6 @@ export const OrderDetailsMessages: React.FC = ({ handleNoteAdd, handleOrderCancel, handleOrderFulfillmentCancel, - handleOrderFulfillmentCreate, handleOrderFulfillmentUpdate, handleOrderLineDelete, handleOrderLineUpdate, diff --git a/src/orders/views/OrderDetails/index.tsx b/src/orders/views/OrderDetails/index.tsx index 67fb571ff..db37b4dab 100644 --- a/src/orders/views/OrderDetails/index.tsx +++ b/src/orders/views/OrderDetails/index.tsx @@ -125,9 +125,6 @@ export const OrderDetails: React.FC = ({ id, params }) => { {orderMessages => ( = ({ orderId }) => { }); const [fulfillOrder, fulfillOrderOpts] = useOrderFulfill({ onCompleted: data => { - if (data.orderFulfillmentCreate.errors.length === 0) { + if (data.orderFulfill.errors.length === 0) { navigate(orderUrl(orderId)); notify({ text: intl.formatMessage({ @@ -71,7 +71,10 @@ const OrderFulfill: React.FC = ({ orderId }) => { fulfillOrder({ variables: { input: { - lines: formData.items.map(line => line.value), + lines: formData.items.map(line => ({ + orderLineId: line.id, + stocks: line.value + })), notifyCustomer: formData.sendInfo }, orderId diff --git a/src/types/globalTypes.ts b/src/types/globalTypes.ts index 5ba44dd88..b26319b99 100644 --- a/src/types/globalTypes.ts +++ b/src/types/globalTypes.ts @@ -456,6 +456,7 @@ export enum OrderErrorCode { CANNOT_DELETE = "CANNOT_DELETE", CANNOT_REFUND = "CANNOT_REFUND", CAPTURE_INACTIVE_PAYMENT = "CAPTURE_INACTIVE_PAYMENT", + DUPLICATED_INPUT_ITEM = "DUPLICATED_INPUT_ITEM", FULFILL_ORDER_LINE = "FULFILL_ORDER_LINE", GRAPHQL_ERROR = "GRAPHQL_ERROR", INSUFFICIENT_STOCK = "INSUFFICIENT_STOCK", @@ -790,6 +791,7 @@ export enum WebhookEventTypeEnum { } export enum WebhookSortField { + APP = "APP", NAME = "NAME", SERVICE_ACCOUNT = "SERVICE_ACCOUNT", TARGET_URL = "TARGET_URL", @@ -997,17 +999,6 @@ export interface FulfillmentCancelInput { restock?: boolean | null; } -export interface FulfillmentCreateInput { - trackingNumber?: string | null; - notifyCustomer?: boolean | null; - lines: (FulfillmentLineInput | null)[]; -} - -export interface FulfillmentLineInput { - orderLineId?: string | null; - quantity?: number | null; -} - export interface FulfillmentUpdateTrackingInput { trackingNumber?: string | null; notifyCustomer?: boolean | null; @@ -1074,6 +1065,21 @@ export interface OrderFilterInput { 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 { quantity: number; variantId: string; @@ -1478,6 +1484,7 @@ export interface WebhookCreateInput { targetUrl?: string | null; events?: (WebhookEventTypeEnum | null)[] | null; serviceAccount?: string | null; + app?: string | null; isActive?: boolean | null; secretKey?: string | null; } @@ -1497,6 +1504,7 @@ export interface WebhookUpdateInput { targetUrl?: string | null; events?: (WebhookEventTypeEnum | null)[] | null; serviceAccount?: string | null; + app?: string | null; isActive?: boolean | null; secretKey?: string | null; } From 65b9dbc483e719198707636ddc765092128d8d12 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Fri, 24 Apr 2020 13:57:58 +0200 Subject: [PATCH 13/19] Do not let go back to fulfillment view after success --- src/orders/views/OrderFulfill/OrderFulfill.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/orders/views/OrderFulfill/OrderFulfill.tsx b/src/orders/views/OrderFulfill/OrderFulfill.tsx index 353a8a3c6..5ad743918 100644 --- a/src/orders/views/OrderFulfill/OrderFulfill.tsx +++ b/src/orders/views/OrderFulfill/OrderFulfill.tsx @@ -33,7 +33,7 @@ const OrderFulfill: React.FC = ({ orderId }) => { const [fulfillOrder, fulfillOrderOpts] = useOrderFulfill({ onCompleted: data => { if (data.orderFulfill.errors.length === 0) { - navigate(orderUrl(orderId)); + navigate(orderUrl(orderId), true); notify({ text: intl.formatMessage({ defaultMessage: "Fulfilled Items", From 037ace2a1b89025c5b36f8eec0bef270e3c23286 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Mon, 27 Apr 2020 15:42:56 +0200 Subject: [PATCH 14/19] Handle stock errors --- .../OrderFulfillPage/OrderFulfillPage.tsx | 18 ++++++++++++++++-- src/orders/mutations.ts | 2 ++ src/orders/types/FulfillOrder.ts | 2 ++ src/orders/views/OrderFulfill/OrderFulfill.tsx | 1 + src/types/globalTypes.ts | 3 ++- 5 files changed, 23 insertions(+), 3 deletions(-) diff --git a/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx b/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx index 88d6fe49b..155eb421d 100644 --- a/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx +++ b/src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx @@ -11,7 +11,10 @@ import classNames from "classnames"; import Typography from "@material-ui/core/Typography"; import useFormset, { FormsetData } from "@saleor/hooks/useFormset"; -import { OrderFulfillStockInput } from "@saleor/types/globalTypes"; +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"; @@ -31,6 +34,7 @@ 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 => ({ @@ -91,6 +95,7 @@ interface OrderFulfillSubmitData extends OrderFulfillFormData { } export interface OrderFulfillPageProps { disabled: boolean; + errors: FulfillOrder_orderFulfill_errors[]; order: OrderFulfillData_order; saveButtonBar: ConfirmButtonTransitionState; warehouses: WarehouseFragment[]; @@ -108,6 +113,7 @@ function getRemainingQuantity(line: OrderFulfillData_order_lines): number { const OrderFulfillPage: React.FC = ({ disabled, + errors, order, saveButtonBar, warehouses, @@ -336,7 +342,15 @@ const OrderFulfillPage: React.FC = ({ } error={ overfulfill || - formsetStock.quantity > availableQuantity + formsetStock.quantity > + availableQuantity || + !!errors?.find( + err => + err.warehouse === warehouse.id && + err.orderLine === line.id && + err.code === + OrderErrorCode.INSUFFICIENT_STOCK + ) } />
diff --git a/src/orders/mutations.ts b/src/orders/mutations.ts index ce0d09016..28fe5cb35 100644 --- a/src/orders/mutations.ts +++ b/src/orders/mutations.ts @@ -460,6 +460,8 @@ const fulfillOrder = gql` orderFulfill(order: $orderId, input: $input) { errors: orderErrors { ...OrderErrorFragment + warehouse + orderLine } order { ...OrderDetailsFragment diff --git a/src/orders/types/FulfillOrder.ts b/src/orders/types/FulfillOrder.ts index 83ccc4bf4..9aa8810ab 100644 --- a/src/orders/types/FulfillOrder.ts +++ b/src/orders/types/FulfillOrder.ts @@ -12,6 +12,8 @@ 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 { diff --git a/src/orders/views/OrderFulfill/OrderFulfill.tsx b/src/orders/views/OrderFulfill/OrderFulfill.tsx index 5ad743918..39dd898d3 100644 --- a/src/orders/views/OrderFulfill/OrderFulfill.tsx +++ b/src/orders/views/OrderFulfill/OrderFulfill.tsx @@ -66,6 +66,7 @@ const OrderFulfill: React.FC = ({ orderId }) => { /> navigate(orderUrl(orderId))} onSubmit={formData => fulfillOrder({ diff --git a/src/types/globalTypes.ts b/src/types/globalTypes.ts index b26319b99..37cfba865 100644 --- a/src/types/globalTypes.ts +++ b/src/types/globalTypes.ts @@ -24,6 +24,7 @@ export enum AccountErrorCode { NOT_FOUND = "NOT_FOUND", OUT_OF_SCOPE_GROUP = "OUT_OF_SCOPE_GROUP", 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", PASSWORD_ENTIRELY_NUMERIC = "PASSWORD_ENTIRELY_NUMERIC", PASSWORD_TOO_COMMON = "PASSWORD_TOO_COMMON", @@ -996,7 +997,7 @@ export interface DraftOrderInput { } export interface FulfillmentCancelInput { - restock?: boolean | null; + warehouseId: string; } export interface FulfillmentUpdateTrackingInput { From 932349a27aab7f79db5603f93da4920fbdc3447d Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Tue, 28 Apr 2020 03:09:31 +0200 Subject: [PATCH 15/19] Minor tweaks --- src/intl.ts | 4 ++ .../OrderBulkCancelDialog.tsx | 15 +---- .../OrderCancelDialog/OrderCancelDialog.tsx | 7 +- .../OrderCannotCancelOrderDialog.tsx | 57 ++++++++++++++++ .../OrderCannotCancelOrderDialog/index.ts | 2 + .../OrderFulfillPage.stories.tsx | 16 +++++ .../OrderFulfillment/OrderFulfillment.tsx | 2 +- src/orders/fixtures.ts | 7 +- src/orders/mutations.ts | 8 +-- src/orders/queries.ts | 5 ++ src/orders/types/FulfillOrder.ts | 7 ++ src/orders/types/FulfillmentFragment.ts | 67 +++++++++++++++++++ src/orders/types/OrderBulkCancel.ts | 1 - src/orders/types/OrderCancel.ts | 8 ++- src/orders/types/OrderCapture.ts | 7 ++ src/orders/types/OrderDetails.ts | 7 ++ src/orders/types/OrderDetailsFragment.ts | 7 ++ src/orders/types/OrderDraftCancel.ts | 7 ++ src/orders/types/OrderDraftFinalize.ts | 7 ++ src/orders/types/OrderDraftUpdate.ts | 7 ++ src/orders/types/OrderFulfillmentCancel.ts | 7 ++ .../types/OrderFulfillmentUpdateTracking.ts | 7 ++ src/orders/types/OrderLineDelete.ts | 7 ++ src/orders/types/OrderLineUpdate.ts | 7 ++ src/orders/types/OrderLinesAdd.ts | 7 ++ src/orders/types/OrderMarkAsPaid.ts | 7 ++ src/orders/types/OrderRefund.ts | 7 ++ src/orders/types/OrderVoid.ts | 7 ++ src/orders/views/OrderDetails/index.tsx | 19 ++++-- src/orders/views/OrderList/OrderList.tsx | 5 +- 30 files changed, 296 insertions(+), 32 deletions(-) create mode 100644 src/orders/components/OrderCannotCancelOrderDialog/OrderCannotCancelOrderDialog.tsx create mode 100644 src/orders/components/OrderCannotCancelOrderDialog/index.ts create mode 100644 src/orders/types/FulfillmentFragment.ts diff --git a/src/intl.ts b/src/intl.ts index 68b4efd27..458961851 100644 --- a/src/intl.ts +++ b/src/intl.ts @@ -121,6 +121,10 @@ export const buttonMessages = defineMessages({ defaultMessage: "Manage", description: "button" }, + ok: { + defaultMessage: "OK", + description: "button" + }, remove: { defaultMessage: "Remove", description: "button" diff --git a/src/orders/components/OrderBulkCancelDialog/OrderBulkCancelDialog.tsx b/src/orders/components/OrderBulkCancelDialog/OrderBulkCancelDialog.tsx index bbbc81e28..d8d073963 100644 --- a/src/orders/components/OrderBulkCancelDialog/OrderBulkCancelDialog.tsx +++ b/src/orders/components/OrderBulkCancelDialog/OrderBulkCancelDialog.tsx @@ -4,14 +4,13 @@ import { FormattedMessage, useIntl } from "react-intl"; import ActionDialog from "@saleor/components/ActionDialog"; import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; -import ControlledCheckbox from "@saleor/components/ControlledCheckbox"; export interface OrderBulkCancelDialogProps { confirmButtonState: ConfirmButtonTransitionState; numberOfOrders: string; open: boolean; onClose: () => void; - onConfirm: (restock: boolean) => void; + onConfirm: () => void; } const OrderBulkCancelDialog: React.FC = ({ @@ -22,7 +21,6 @@ const OrderBulkCancelDialog: React.FC = ({ onConfirm }) => { const intl = useIntl(); - const [restock, setRestock] = React.useState(true); return ( = ({ description: "dialog header" })} onClose={onClose} - onConfirm={() => onConfirm(restock)} + onConfirm={onConfirm} > = ({ }} /> - setRestock(event.target.value)} - /> ); }; diff --git a/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx b/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx index dc2a21fc9..34748e33b 100644 --- a/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx +++ b/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx @@ -21,8 +21,8 @@ export interface OrderCancelDialogProps { errors: OrderErrorFragment[]; number: string; open: boolean; - onClose?(); - onSubmit(); + onClose: () => void; + onSubmit: () => void; } const OrderCancelDialog: React.FC = props => { @@ -50,8 +50,9 @@ const OrderCancelDialog: React.FC = props => { {chunks}, orderNumber }} /> diff --git a/src/orders/components/OrderCannotCancelOrderDialog/OrderCannotCancelOrderDialog.tsx b/src/orders/components/OrderCannotCancelOrderDialog/OrderCannotCancelOrderDialog.tsx new file mode 100644 index 000000000..b2a515ea2 --- /dev/null +++ b/src/orders/components/OrderCannotCancelOrderDialog/OrderCannotCancelOrderDialog.tsx @@ -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 = ({ + open, + onClose +}) => { + const classes = useStyles({}); + + return ( + + + + + + + + + + + + + + ); +}; +OrderCannotCancelOrderDialog.displayName = "OrderCannotCancelOrderDialog"; +export default OrderCannotCancelOrderDialog; diff --git a/src/orders/components/OrderCannotCancelOrderDialog/index.ts b/src/orders/components/OrderCannotCancelOrderDialog/index.ts new file mode 100644 index 000000000..7a5eb78e1 --- /dev/null +++ b/src/orders/components/OrderCannotCancelOrderDialog/index.ts @@ -0,0 +1,2 @@ +export { default } from "./OrderCannotCancelOrderDialog"; +export * from "./OrderCannotCancelOrderDialog"; diff --git a/src/orders/components/OrderFulfillPage/OrderFulfillPage.stories.tsx b/src/orders/components/OrderFulfillPage/OrderFulfillPage.stories.tsx index 58e12a34b..cbd11bbdc 100644 --- a/src/orders/components/OrderFulfillPage/OrderFulfillPage.stories.tsx +++ b/src/orders/components/OrderFulfillPage/OrderFulfillPage.stories.tsx @@ -3,11 +3,13 @@ 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, @@ -25,4 +27,18 @@ storiesOf("Views / Orders / Fulfill order", module) order={undefined} warehouses={undefined} /> + )) + .add("error", () => ( + )); diff --git a/src/orders/components/OrderFulfillment/OrderFulfillment.tsx b/src/orders/components/OrderFulfillment/OrderFulfillment.tsx index 73d1d0ddf..ea85414ac 100644 --- a/src/orders/components/OrderFulfillment/OrderFulfillment.tsx +++ b/src/orders/components/OrderFulfillment/OrderFulfillment.tsx @@ -240,7 +240,7 @@ const OrderFulfillment: React.FC = props => { color="textPrimary" variant="body2" > - default + {fulfillment.warehouse.name} ) }} diff --git a/src/orders/fixtures.ts b/src/orders/fixtures.ts index c08cf001f..41279fd34 100644 --- a/src/orders/fixtures.ts +++ b/src/orders/fixtures.ts @@ -1,5 +1,6 @@ import { SearchCustomers_search_edges_node } from "@saleor/searches/types/SearchCustomers"; import { MessageDescriptor } from "react-intl"; +import { warehouseList } from "@saleor/warehouses/fixtures"; import { transformOrderStatus, transformPaymentStatus } from "../misc"; import { FulfillmentStatus, @@ -865,7 +866,8 @@ export const order = (placeholder: string): OrderDetails_order => ({ } ], status: FulfillmentStatus.FULFILLED, - trackingNumber: "" + trackingNumber: "", + warehouse: warehouseList[1] }, { __typename: "Fulfillment", @@ -905,7 +907,8 @@ export const order = (placeholder: string): OrderDetails_order => ({ } ], status: FulfillmentStatus.FULFILLED, - trackingNumber: "01nn12399su12nndfsy" + trackingNumber: "01nn12399su12nndfsy", + warehouse: warehouseList[0] } ], id: "T3JkZXI6OQ==", diff --git a/src/orders/mutations.ts b/src/orders/mutations.ts index 28fe5cb35..9bd64447b 100644 --- a/src/orders/mutations.ts +++ b/src/orders/mutations.ts @@ -71,8 +71,8 @@ export const orderErrorFragment = gql` const orderCancelMutation = gql` ${fragmentOrderDetails} ${orderErrorFragment} - mutation OrderCancel($id: ID!, $restock: Boolean!) { - orderCancel(id: $id, restock: $restock) { + mutation OrderCancel($id: ID!) { + orderCancel(id: $id) { errors: orderErrors { ...OrderErrorFragment } @@ -89,8 +89,8 @@ export const TypedOrderCancelMutation = TypedMutation< const orderBulkCancelMutation = gql` ${orderErrorFragment} - mutation OrderBulkCancel($ids: [ID]!, $restock: Boolean!) { - orderBulkCancel(ids: $ids, restock: $restock) { + mutation OrderBulkCancel($ids: [ID]!) { + orderBulkCancel(ids: $ids) { errors: orderErrors { ...OrderErrorFragment } diff --git a/src/orders/queries.ts b/src/orders/queries.ts index 8ecb5ff8d..e5c4db3b8 100644 --- a/src/orders/queries.ts +++ b/src/orders/queries.ts @@ -2,6 +2,7 @@ import gql from "graphql-tag"; import makeTopLevelSearch from "@saleor/hooks/makeTopLevelSearch"; import makeQuery from "@saleor/hooks/makeQuery"; +import { warehouseFragment } from "@saleor/warehouses/queries"; import { TypedQuery } from "../queries"; import { OrderDetails, OrderDetailsVariables } from "./types/OrderDetails"; import { @@ -79,6 +80,7 @@ export const fragmentOrderLine = gql` `; export const fulfillmentFragment = gql` ${fragmentOrderLine} + ${warehouseFragment} fragment FulfillmentFragment on Fulfillment { id lines { @@ -91,6 +93,9 @@ export const fulfillmentFragment = gql` fulfillmentOrder status trackingNumber + warehouse { + ...WarehouseFragment + } } `; diff --git a/src/orders/types/FulfillOrder.ts b/src/orders/types/FulfillOrder.ts index 9aa8810ab..786ffb08c 100644 --- a/src/orders/types/FulfillOrder.ts +++ b/src/orders/types/FulfillOrder.ts @@ -99,6 +99,12 @@ export interface FulfillOrder_orderFulfill_order_fulfillments_lines { 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; @@ -106,6 +112,7 @@ export interface FulfillOrder_orderFulfill_order_fulfillments { fulfillmentOrder: number; status: FulfillmentStatus; trackingNumber: string; + warehouse: FulfillOrder_orderFulfill_order_fulfillments_warehouse | null; } export interface FulfillOrder_orderFulfill_order_lines_unitPrice_gross { diff --git a/src/orders/types/FulfillmentFragment.ts b/src/orders/types/FulfillmentFragment.ts new file mode 100644 index 000000000..e8ac634b5 --- /dev/null +++ b/src/orders/types/FulfillmentFragment.ts @@ -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; +} diff --git a/src/orders/types/OrderBulkCancel.ts b/src/orders/types/OrderBulkCancel.ts index c61e82ac7..1a838b957 100644 --- a/src/orders/types/OrderBulkCancel.ts +++ b/src/orders/types/OrderBulkCancel.ts @@ -25,5 +25,4 @@ export interface OrderBulkCancel { export interface OrderBulkCancelVariables { ids: (string | null)[]; - restock: boolean; } diff --git a/src/orders/types/OrderCancel.ts b/src/orders/types/OrderCancel.ts index 19db67e37..7258dbdb0 100644 --- a/src/orders/types/OrderCancel.ts +++ b/src/orders/types/OrderCancel.ts @@ -97,6 +97,12 @@ export interface OrderCancel_orderCancel_order_fulfillments_lines { 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 { __typename: "Fulfillment"; id: string; @@ -104,6 +110,7 @@ export interface OrderCancel_orderCancel_order_fulfillments { fulfillmentOrder: number; status: FulfillmentStatus; trackingNumber: string; + warehouse: OrderCancel_orderCancel_order_fulfillments_warehouse | null; } export interface OrderCancel_orderCancel_order_lines_unitPrice_gross { @@ -278,5 +285,4 @@ export interface OrderCancel { export interface OrderCancelVariables { id: string; - restock: boolean; } diff --git a/src/orders/types/OrderCapture.ts b/src/orders/types/OrderCapture.ts index 502223d9d..5c3abf2ee 100644 --- a/src/orders/types/OrderCapture.ts +++ b/src/orders/types/OrderCapture.ts @@ -97,6 +97,12 @@ export interface OrderCapture_orderCapture_order_fulfillments_lines { 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 { __typename: "Fulfillment"; id: string; @@ -104,6 +110,7 @@ export interface OrderCapture_orderCapture_order_fulfillments { fulfillmentOrder: number; status: FulfillmentStatus; trackingNumber: string; + warehouse: OrderCapture_orderCapture_order_fulfillments_warehouse | null; } export interface OrderCapture_orderCapture_order_lines_unitPrice_gross { diff --git a/src/orders/types/OrderDetails.ts b/src/orders/types/OrderDetails.ts index a668e4563..4ec01cdca 100644 --- a/src/orders/types/OrderDetails.ts +++ b/src/orders/types/OrderDetails.ts @@ -91,6 +91,12 @@ export interface OrderDetails_order_fulfillments_lines { orderLine: OrderDetails_order_fulfillments_lines_orderLine | null; } +export interface OrderDetails_order_fulfillments_warehouse { + __typename: "Warehouse"; + id: string; + name: string; +} + export interface OrderDetails_order_fulfillments { __typename: "Fulfillment"; id: string; @@ -98,6 +104,7 @@ export interface OrderDetails_order_fulfillments { fulfillmentOrder: number; status: FulfillmentStatus; trackingNumber: string; + warehouse: OrderDetails_order_fulfillments_warehouse | null; } export interface OrderDetails_order_lines_unitPrice_gross { diff --git a/src/orders/types/OrderDetailsFragment.ts b/src/orders/types/OrderDetailsFragment.ts index fc2f5d3ba..e01d64bbb 100644 --- a/src/orders/types/OrderDetailsFragment.ts +++ b/src/orders/types/OrderDetailsFragment.ts @@ -91,6 +91,12 @@ export interface OrderDetailsFragment_fulfillments_lines { orderLine: OrderDetailsFragment_fulfillments_lines_orderLine | null; } +export interface OrderDetailsFragment_fulfillments_warehouse { + __typename: "Warehouse"; + id: string; + name: string; +} + export interface OrderDetailsFragment_fulfillments { __typename: "Fulfillment"; id: string; @@ -98,6 +104,7 @@ export interface OrderDetailsFragment_fulfillments { fulfillmentOrder: number; status: FulfillmentStatus; trackingNumber: string; + warehouse: OrderDetailsFragment_fulfillments_warehouse | null; } export interface OrderDetailsFragment_lines_unitPrice_gross { diff --git a/src/orders/types/OrderDraftCancel.ts b/src/orders/types/OrderDraftCancel.ts index 75c50fc0d..0d5f737d9 100644 --- a/src/orders/types/OrderDraftCancel.ts +++ b/src/orders/types/OrderDraftCancel.ts @@ -97,6 +97,12 @@ export interface OrderDraftCancel_draftOrderDelete_order_fulfillments_lines { 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 { __typename: "Fulfillment"; id: string; @@ -104,6 +110,7 @@ export interface OrderDraftCancel_draftOrderDelete_order_fulfillments { fulfillmentOrder: number; status: FulfillmentStatus; trackingNumber: string; + warehouse: OrderDraftCancel_draftOrderDelete_order_fulfillments_warehouse | null; } export interface OrderDraftCancel_draftOrderDelete_order_lines_unitPrice_gross { diff --git a/src/orders/types/OrderDraftFinalize.ts b/src/orders/types/OrderDraftFinalize.ts index e4f7c715b..8b1ea1068 100644 --- a/src/orders/types/OrderDraftFinalize.ts +++ b/src/orders/types/OrderDraftFinalize.ts @@ -97,6 +97,12 @@ export interface OrderDraftFinalize_draftOrderComplete_order_fulfillments_lines 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 { __typename: "Fulfillment"; id: string; @@ -104,6 +110,7 @@ export interface OrderDraftFinalize_draftOrderComplete_order_fulfillments { fulfillmentOrder: number; status: FulfillmentStatus; trackingNumber: string; + warehouse: OrderDraftFinalize_draftOrderComplete_order_fulfillments_warehouse | null; } export interface OrderDraftFinalize_draftOrderComplete_order_lines_unitPrice_gross { diff --git a/src/orders/types/OrderDraftUpdate.ts b/src/orders/types/OrderDraftUpdate.ts index 6a54380da..77f764948 100644 --- a/src/orders/types/OrderDraftUpdate.ts +++ b/src/orders/types/OrderDraftUpdate.ts @@ -97,6 +97,12 @@ export interface OrderDraftUpdate_draftOrderUpdate_order_fulfillments_lines { 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 { __typename: "Fulfillment"; id: string; @@ -104,6 +110,7 @@ export interface OrderDraftUpdate_draftOrderUpdate_order_fulfillments { fulfillmentOrder: number; status: FulfillmentStatus; trackingNumber: string; + warehouse: OrderDraftUpdate_draftOrderUpdate_order_fulfillments_warehouse | null; } export interface OrderDraftUpdate_draftOrderUpdate_order_lines_unitPrice_gross { diff --git a/src/orders/types/OrderFulfillmentCancel.ts b/src/orders/types/OrderFulfillmentCancel.ts index 667f4a9f8..014908b9e 100644 --- a/src/orders/types/OrderFulfillmentCancel.ts +++ b/src/orders/types/OrderFulfillmentCancel.ts @@ -97,6 +97,12 @@ export interface OrderFulfillmentCancel_orderFulfillmentCancel_order_fulfillment 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 { __typename: "Fulfillment"; id: string; @@ -104,6 +110,7 @@ export interface OrderFulfillmentCancel_orderFulfillmentCancel_order_fulfillment fulfillmentOrder: number; status: FulfillmentStatus; trackingNumber: string; + warehouse: OrderFulfillmentCancel_orderFulfillmentCancel_order_fulfillments_warehouse | null; } export interface OrderFulfillmentCancel_orderFulfillmentCancel_order_lines_unitPrice_gross { diff --git a/src/orders/types/OrderFulfillmentUpdateTracking.ts b/src/orders/types/OrderFulfillmentUpdateTracking.ts index 83b44ed82..0a0e5cca1 100644 --- a/src/orders/types/OrderFulfillmentUpdateTracking.ts +++ b/src/orders/types/OrderFulfillmentUpdateTracking.ts @@ -97,6 +97,12 @@ export interface OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_o 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 { __typename: "Fulfillment"; id: string; @@ -104,6 +110,7 @@ export interface OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_o fulfillmentOrder: number; status: FulfillmentStatus; trackingNumber: string; + warehouse: OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_fulfillments_warehouse | null; } export interface OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_lines_unitPrice_gross { diff --git a/src/orders/types/OrderLineDelete.ts b/src/orders/types/OrderLineDelete.ts index 96c7b2548..8205439ea 100644 --- a/src/orders/types/OrderLineDelete.ts +++ b/src/orders/types/OrderLineDelete.ts @@ -97,6 +97,12 @@ export interface OrderLineDelete_draftOrderLineDelete_order_fulfillments_lines { 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 { __typename: "Fulfillment"; id: string; @@ -104,6 +110,7 @@ export interface OrderLineDelete_draftOrderLineDelete_order_fulfillments { fulfillmentOrder: number; status: FulfillmentStatus; trackingNumber: string; + warehouse: OrderLineDelete_draftOrderLineDelete_order_fulfillments_warehouse | null; } export interface OrderLineDelete_draftOrderLineDelete_order_lines_unitPrice_gross { diff --git a/src/orders/types/OrderLineUpdate.ts b/src/orders/types/OrderLineUpdate.ts index 3651a5cce..948b0beac 100644 --- a/src/orders/types/OrderLineUpdate.ts +++ b/src/orders/types/OrderLineUpdate.ts @@ -97,6 +97,12 @@ export interface OrderLineUpdate_draftOrderLineUpdate_order_fulfillments_lines { 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 { __typename: "Fulfillment"; id: string; @@ -104,6 +110,7 @@ export interface OrderLineUpdate_draftOrderLineUpdate_order_fulfillments { fulfillmentOrder: number; status: FulfillmentStatus; trackingNumber: string; + warehouse: OrderLineUpdate_draftOrderLineUpdate_order_fulfillments_warehouse | null; } export interface OrderLineUpdate_draftOrderLineUpdate_order_lines_unitPrice_gross { diff --git a/src/orders/types/OrderLinesAdd.ts b/src/orders/types/OrderLinesAdd.ts index 20ecbd7fa..b2cd429e8 100644 --- a/src/orders/types/OrderLinesAdd.ts +++ b/src/orders/types/OrderLinesAdd.ts @@ -97,6 +97,12 @@ export interface OrderLinesAdd_draftOrderLinesCreate_order_fulfillments_lines { 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 { __typename: "Fulfillment"; id: string; @@ -104,6 +110,7 @@ export interface OrderLinesAdd_draftOrderLinesCreate_order_fulfillments { fulfillmentOrder: number; status: FulfillmentStatus; trackingNumber: string; + warehouse: OrderLinesAdd_draftOrderLinesCreate_order_fulfillments_warehouse | null; } export interface OrderLinesAdd_draftOrderLinesCreate_order_lines_unitPrice_gross { diff --git a/src/orders/types/OrderMarkAsPaid.ts b/src/orders/types/OrderMarkAsPaid.ts index 4047ef0b9..898cf9a99 100644 --- a/src/orders/types/OrderMarkAsPaid.ts +++ b/src/orders/types/OrderMarkAsPaid.ts @@ -97,6 +97,12 @@ export interface OrderMarkAsPaid_orderMarkAsPaid_order_fulfillments_lines { 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 { __typename: "Fulfillment"; id: string; @@ -104,6 +110,7 @@ export interface OrderMarkAsPaid_orderMarkAsPaid_order_fulfillments { fulfillmentOrder: number; status: FulfillmentStatus; trackingNumber: string; + warehouse: OrderMarkAsPaid_orderMarkAsPaid_order_fulfillments_warehouse | null; } export interface OrderMarkAsPaid_orderMarkAsPaid_order_lines_unitPrice_gross { diff --git a/src/orders/types/OrderRefund.ts b/src/orders/types/OrderRefund.ts index 29eee9ef3..6f764f9e6 100644 --- a/src/orders/types/OrderRefund.ts +++ b/src/orders/types/OrderRefund.ts @@ -97,6 +97,12 @@ export interface OrderRefund_orderRefund_order_fulfillments_lines { 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 { __typename: "Fulfillment"; id: string; @@ -104,6 +110,7 @@ export interface OrderRefund_orderRefund_order_fulfillments { fulfillmentOrder: number; status: FulfillmentStatus; trackingNumber: string; + warehouse: OrderRefund_orderRefund_order_fulfillments_warehouse | null; } export interface OrderRefund_orderRefund_order_lines_unitPrice_gross { diff --git a/src/orders/types/OrderVoid.ts b/src/orders/types/OrderVoid.ts index 3ee9caec1..880598c78 100644 --- a/src/orders/types/OrderVoid.ts +++ b/src/orders/types/OrderVoid.ts @@ -97,6 +97,12 @@ export interface OrderVoid_orderVoid_order_fulfillments_lines { 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 { __typename: "Fulfillment"; id: string; @@ -104,6 +110,7 @@ export interface OrderVoid_orderVoid_order_fulfillments { fulfillmentOrder: number; status: FulfillmentStatus; trackingNumber: string; + warehouse: OrderVoid_orderVoid_order_fulfillments_warehouse | null; } export interface OrderVoid_orderVoid_order_lines_unitPrice_gross { diff --git a/src/orders/views/OrderDetails/index.tsx b/src/orders/views/OrderDetails/index.tsx index db37b4dab..50c369b6c 100644 --- a/src/orders/views/OrderDetails/index.tsx +++ b/src/orders/views/OrderDetails/index.tsx @@ -9,6 +9,7 @@ import useCustomerSearch from "@saleor/searches/useCustomerSearch"; import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; 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 { maybe, @@ -16,7 +17,7 @@ import { getStringOrPlaceholder } from "../../../misc"; import { productUrl } from "../../../products/urls"; -import { OrderStatus } from "../../../types/globalTypes"; +import { OrderStatus, FulfillmentStatus } from "../../../types/globalTypes"; import OrderAddressEditDialog from "../../components/OrderAddressEditDialog"; import OrderCancelDialog from "../../components/OrderCancelDialog"; import OrderDetailsPage from "../../components/OrderDetailsPage"; @@ -229,6 +230,17 @@ export const OrderDetails: React.FC = ({ id, params }) => { navigate(customerUrl(order.user.id)) } /> + + fulfillment.status === + FulfillmentStatus.FULFILLED + ) + } + /> = ({ id, params }) => { number={order?.number} open={params.action === "cancel"} onClose={closeModal} - onSubmit={variables => + onSubmit={() => orderCancel.mutate({ - id, - ...variables + id }) } /> diff --git a/src/orders/views/OrderList/OrderList.tsx b/src/orders/views/OrderList/OrderList.tsx index eccc47b8f..672539522 100644 --- a/src/orders/views/OrderList/OrderList.tsx +++ b/src/orders/views/OrderList/OrderList.tsx @@ -164,11 +164,10 @@ export const OrderList: React.FC = ({ params }) => { return ( {(orderBulkCancel, orderBulkCancelOpts) => { - const onOrderBulkCancel = (restock: boolean) => + const onOrderBulkCancel = () => orderBulkCancel({ variables: { - ids: params.ids, - restock + ids: params.ids } }); From 5a3afa84a561fc7889c32540ac23e0992c9d87df Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Tue, 28 Apr 2020 03:17:58 +0200 Subject: [PATCH 16/19] Display warehouse from which items were fulfilled --- src/orders/components/OrderFulfillment/OrderFulfillment.tsx | 4 ++-- src/orders/queries.ts | 5 ++--- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/orders/components/OrderFulfillment/OrderFulfillment.tsx b/src/orders/components/OrderFulfillment/OrderFulfillment.tsx index ea85414ac..c52c85845 100644 --- a/src/orders/components/OrderFulfillment/OrderFulfillment.tsx +++ b/src/orders/components/OrderFulfillment/OrderFulfillment.tsx @@ -20,7 +20,7 @@ import StatusLabel from "@saleor/components/StatusLabel"; import TableCellAvatar, { AVATAR_MARGIN } from "@saleor/components/TableCellAvatar"; -import { maybe, renderCollection } from "../../../misc"; +import { maybe, renderCollection, getStringOrPlaceholder } from "../../../misc"; import { FulfillmentStatus } from "../../../types/globalTypes"; import { OrderDetails_order_fulfillments } from "../../types/OrderDetails"; @@ -240,7 +240,7 @@ const OrderFulfillment: React.FC = props => { color="textPrimary" variant="body2" > - {fulfillment.warehouse.name} + {getStringOrPlaceholder(fulfillment?.warehouse?.name)} ) }} diff --git a/src/orders/queries.ts b/src/orders/queries.ts index e5c4db3b8..2c49a87b3 100644 --- a/src/orders/queries.ts +++ b/src/orders/queries.ts @@ -2,7 +2,6 @@ import gql from "graphql-tag"; import makeTopLevelSearch from "@saleor/hooks/makeTopLevelSearch"; import makeQuery from "@saleor/hooks/makeQuery"; -import { warehouseFragment } from "@saleor/warehouses/queries"; import { TypedQuery } from "../queries"; import { OrderDetails, OrderDetailsVariables } from "./types/OrderDetails"; import { @@ -80,7 +79,6 @@ export const fragmentOrderLine = gql` `; export const fulfillmentFragment = gql` ${fragmentOrderLine} - ${warehouseFragment} fragment FulfillmentFragment on Fulfillment { id lines { @@ -94,7 +92,8 @@ export const fulfillmentFragment = gql` status trackingNumber warehouse { - ...WarehouseFragment + id + name } } `; From 3a81eaaf3d561f674e71f2bd6fbee3f8e0859a2c Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Tue, 28 Apr 2020 10:59:40 +0200 Subject: [PATCH 17/19] Remove order bulk cancel --- src/orders/components/OrderList/OrderList.tsx | 163 +++++++----------- .../OrderListPage/OrderListPage.tsx | 8 +- src/orders/mutations.ts | 19 -- src/orders/types/OrderBulkCancel.ts | 28 --- src/orders/views/OrderList/OrderList.tsx | 154 +++++------------ 5 files changed, 110 insertions(+), 262 deletions(-) delete mode 100644 src/orders/types/OrderBulkCancel.ts diff --git a/src/orders/components/OrderList/OrderList.tsx b/src/orders/components/OrderList/OrderList.tsx index 45a9f7cc9..b119bf771 100644 --- a/src/orders/components/OrderList/OrderList.tsx +++ b/src/orders/components/OrderList/OrderList.tsx @@ -3,16 +3,15 @@ import TableBody from "@material-ui/core/TableBody"; import TableCell from "@material-ui/core/TableCell"; import TableFooter from "@material-ui/core/TableFooter"; import TableRow from "@material-ui/core/TableRow"; +import TableHead from "@material-ui/core/TableHead"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; -import Checkbox from "@saleor/components/Checkbox"; import { DateTime } from "@saleor/components/Date"; import Money from "@saleor/components/Money"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; import Skeleton from "@saleor/components/Skeleton"; import StatusLabel from "@saleor/components/StatusLabel"; -import TableHead from "@saleor/components/TableHead"; import TablePagination from "@saleor/components/TablePagination"; import { maybe, @@ -20,7 +19,7 @@ import { transformOrderStatus, transformPaymentStatus } from "@saleor/misc"; -import { ListActions, ListProps, SortPage } from "@saleor/types"; +import { ListProps, SortPage } from "@saleor/types"; import { OrderListUrlSortField } from "@saleor/orders/urls"; import TableCellHeader from "@saleor/components/TableCellHeader"; import { getArrowDirection } from "@saleor/utils/sort"; @@ -59,14 +58,11 @@ const useStyles = makeStyles( { name: "OrderList" } ); -interface OrderListProps - extends ListProps, - ListActions, - SortPage { +interface OrderListProps extends ListProps, SortPage { orders: OrderList_orders_edges_node[]; } -const numberOfColumns = 7; +const numberOfColumns = 6; export const OrderList: React.FC = props => { const { @@ -79,12 +75,7 @@ export const OrderList: React.FC = props => { onUpdateListSettings, onRowClick, onSort, - isChecked, - selected, - sort, - toggle, - toggleAll, - toolbar + sort } = props; const classes = useStyles(props); @@ -99,14 +90,7 @@ export const OrderList: React.FC = props => { : undefined; return ( - + = props => { {renderCollection( orderList, - order => { - const isSelected = order ? isChecked(order.id) : false; - - return ( - - - toggle(order.id)} - /> - - - {maybe(() => order.number) ? ( - "#" + order.number - ) : ( - - )} - - - {maybe(() => order.created) ? ( - - ) : ( - - )} - - - {maybe(() => order.billingAddress) ? ( - <> - {order.billingAddress.firstName} -   - {order.billingAddress.lastName} - - ) : maybe(() => order.userEmail) !== undefined ? ( - order.userEmail - ) : ( - - )} - - - {maybe(() => order.paymentStatus.status) !== undefined ? ( - order.paymentStatus.status === null ? null : ( - - ) - ) : ( - - )} - - - {maybe(() => order.status) ? ( + order => ( + + + {maybe(() => order.number) ? "#" + order.number : } + + + {maybe(() => order.created) ? ( + + ) : ( + + )} + + + {maybe(() => order.billingAddress) ? ( + <> + {order.billingAddress.firstName} +   + {order.billingAddress.lastName} + + ) : maybe(() => order.userEmail) !== undefined ? ( + order.userEmail + ) : ( + + )} + + + {maybe(() => order.paymentStatus.status) !== undefined ? ( + order.paymentStatus.status === null ? null : ( - ) : ( - - )} - - - {maybe(() => order.total.gross) ? ( - - ) : ( - - )} - - - ); - }, + ) + ) : ( + + )} + + + {maybe(() => order.status) ? ( + + ) : ( + + )} + + + {maybe(() => order.total.gross) ? ( + + ) : ( + + )} + + + ), () => ( diff --git a/src/orders/components/OrderListPage/OrderListPage.tsx b/src/orders/components/OrderListPage/OrderListPage.tsx index 525380a0d..aaf2e7141 100644 --- a/src/orders/components/OrderListPage/OrderListPage.tsx +++ b/src/orders/components/OrderListPage/OrderListPage.tsx @@ -7,12 +7,7 @@ import { FormattedMessage, useIntl } from "react-intl"; import Container from "@saleor/components/Container"; import PageHeader from "@saleor/components/PageHeader"; import { sectionNames } from "@saleor/intl"; -import { - FilterPageProps, - ListActions, - PageListProps, - SortPage -} from "@saleor/types"; +import { FilterPageProps, PageListProps, SortPage } from "@saleor/types"; import { OrderListUrlSortField } from "@saleor/orders/urls"; import FilterBar from "@saleor/components/FilterBar"; import { OrderList_orders_edges_node } from "../../types/OrderList"; @@ -25,7 +20,6 @@ import { export interface OrderListPageProps extends PageListProps, - ListActions, FilterPageProps, SortPage { orders: OrderList_orders_edges_node[]; diff --git a/src/orders/mutations.ts b/src/orders/mutations.ts index 9bd64447b..d94c3f8ff 100644 --- a/src/orders/mutations.ts +++ b/src/orders/mutations.ts @@ -8,10 +8,6 @@ import { fragmentOrderEvent } from "./queries"; import { OrderAddNote, OrderAddNoteVariables } from "./types/OrderAddNote"; -import { - OrderBulkCancel, - OrderBulkCancelVariables -} from "./types/OrderBulkCancel"; import { OrderCancel, OrderCancelVariables } from "./types/OrderCancel"; import { OrderCapture, OrderCaptureVariables } from "./types/OrderCapture"; import { @@ -87,21 +83,6 @@ export const TypedOrderCancelMutation = TypedMutation< OrderCancelVariables >(orderCancelMutation); -const orderBulkCancelMutation = gql` - ${orderErrorFragment} - mutation OrderBulkCancel($ids: [ID]!) { - orderBulkCancel(ids: $ids) { - errors: orderErrors { - ...OrderErrorFragment - } - } - } -`; -export const TypedOrderBulkCancelMutation = TypedMutation< - OrderBulkCancel, - OrderBulkCancelVariables ->(orderBulkCancelMutation); - const orderDraftCancelMutation = gql` ${fragmentOrderDetails} ${orderErrorFragment} diff --git a/src/orders/types/OrderBulkCancel.ts b/src/orders/types/OrderBulkCancel.ts deleted file mode 100644 index 1a838b957..000000000 --- a/src/orders/types/OrderBulkCancel.ts +++ /dev/null @@ -1,28 +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)[]; -} diff --git a/src/orders/views/OrderList/OrderList.tsx b/src/orders/views/OrderList/OrderList.tsx index 672539522..d08881d2b 100644 --- a/src/orders/views/OrderList/OrderList.tsx +++ b/src/orders/views/OrderList/OrderList.tsx @@ -1,12 +1,10 @@ -import Button from "@material-ui/core/Button"; import React from "react"; -import { FormattedMessage, useIntl } from "react-intl"; +import { useIntl } from "react-intl"; import DeleteFilterTabDialog from "@saleor/components/DeleteFilterTabDialog"; import SaveFilterTabDialog, { SaveFilterTabDialogFormData } from "@saleor/components/SaveFilterTabDialog"; -import useBulkActions from "@saleor/hooks/useBulkActions"; import useListSettings from "@saleor/hooks/useListSettings"; import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; @@ -14,20 +12,15 @@ import usePaginator, { createPaginationState } from "@saleor/hooks/usePaginator"; import useShop from "@saleor/hooks/useShop"; -import { maybe } from "@saleor/misc"; +import { maybe, getStringOrPlaceholder } from "@saleor/misc"; import { ListViews } from "@saleor/types"; import createSortHandler from "@saleor/utils/handlers/sortHandler"; import { getSortParams } from "@saleor/utils/sort"; import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers"; import createFilterHandlers from "@saleor/utils/handlers/filterHandlers"; -import OrderBulkCancelDialog from "../../components/OrderBulkCancelDialog"; import OrderListPage from "../../components/OrderListPage/OrderListPage"; -import { - TypedOrderBulkCancelMutation, - useOrderDraftCreateMutation -} from "../../mutations"; +import { useOrderDraftCreateMutation } from "../../mutations"; import { useOrderListQuery } from "../../queries"; -import { OrderBulkCancel } from "../../types/OrderBulkCancel"; import { OrderDraftCreate } from "../../types/OrderDraftCreate"; import { orderListUrl, @@ -56,9 +49,6 @@ export const OrderList: React.FC = ({ params }) => { const notify = useNotifier(); const paginate = usePaginator(); const shop = useShop(); - const { isSelected, listElements, reset, toggle, toggleAll } = useBulkActions( - params.ids - ); const { updateListSettings, settings } = useListSettings( ListViews.ORDER_LIST ); @@ -91,7 +81,6 @@ export const OrderList: React.FC = ({ params }) => { resetFilters, handleSearchChange ] = createFilterHandlers({ - cleanupFn: reset, createUrl: orderListUrl, getFilterQueryParam, navigate, @@ -103,19 +92,16 @@ export const OrderList: React.FC = ({ params }) => { OrderListUrlQueryParams >(navigate, orderListUrl, params); - const handleTabChange = (tab: number) => { - reset(); + const handleTabChange = (tab: number) => navigate( orderListUrl({ activeTab: tab.toString(), ...getFilterTabs()[tab - 1].data }) ); - }; const handleFilterTabDelete = () => { deleteFilterTab(currentTab); - reset(); navigate(orderListUrl()); }; @@ -135,7 +121,7 @@ export const OrderList: React.FC = ({ params }) => { }), [params, settings.rowNumber] ); - const { data, loading, refetch } = useOrderListQuery({ + const { data, loading } = useOrderListQuery({ displayLoader: true, variables: queryVariables }); @@ -146,100 +132,48 @@ export const OrderList: React.FC = ({ 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); return ( - - {(orderBulkCancel, orderBulkCancelOpts) => { - const onOrderBulkCancel = () => - orderBulkCancel({ - variables: { - ids: params.ids - } - }); - - return ( - <> - data.orders.edges.map(edge => edge.node))} - pageInfo={pageInfo} - sort={getSortParams(params)} - onAdd={createOrder} - onNextPage={loadNextPage} - onPreviousPage={loadPreviousPage} - onUpdateListSettings={updateListSettings} - onRowClick={id => () => navigate(orderUrl(id))} - onSort={handleSort} - isChecked={isSelected} - selected={listElements.length} - toggle={toggle} - toggleAll={toggleAll} - toolbar={ - - } - 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} - /> - params.ids.length.toString(), "...")} - onClose={closeModal} - onConfirm={onOrderBulkCancel} - open={params.action === "cancel"} - /> - - tabs[currentTab - 1].name, "...")} - /> - - ); - }} - + <> + data.orders.edges.map(edge => edge.node))} + pageInfo={pageInfo} + sort={getSortParams(params)} + onAdd={createOrder} + onNextPage={loadNextPage} + onPreviousPage={loadPreviousPage} + onUpdateListSettings={updateListSettings} + onRowClick={id => () => navigate(orderUrl(id))} + onSort={handleSort} + 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} + /> + + + ); }; From 3f5474659fa6087355ae543db360d8023c900729 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Tue, 28 Apr 2020 11:07:12 +0200 Subject: [PATCH 18/19] Update snapshots --- .../__snapshots__/Stories.test.ts.snap | 1934 ++++++++++++----- 1 file changed, 1383 insertions(+), 551 deletions(-) diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap index 5f068e403..d110e1f55 100644 --- a/src/storybook/__snapshots__/Stories.test.ts.snap +++ b/src/storybook/__snapshots__/Stories.test.ts.snap @@ -64378,25 +64378,25 @@ exports[`Storyshots Views / Orders / Fulfill order default 1`] = ` SKU C our wares Be stocked A Warehouse Darkwares @@ -64633,6 +64633,415 @@ exports[`Storyshots Views / Orders / Fulfill order default 1`] = ` / 2 + + +
+
+ +
+
+ Lemon Juice +
+ 2.5l +
+
+
+ + + 998323583 + + + No Stock + + + + 0 + + / 1 + + + + +
+
+ +
+ + + + +`; + +exports[`Storyshots Views / Orders / Fulfill order error 1`] = ` +
+
+
+
+ Order no. 9123 - Add Fulfillment +
+
+
+
+
+
+
+
+ + Items ready to ship + +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + @@ -64849,6 +65258,281 @@ exports[`Storyshots Views / Orders / Fulfill order default 1`] = ` > 998323584 + + + + + + + + + + + + @@ -65332,7 +66016,7 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
- Fulfilled (1) + Cancelled (1)
@@ -65435,6 +66119,28 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = ` $79.71
+ + +
+ Product name + + SKU + + C our wares + + Be stocked + + A Warehouse + + Darkwares + + Quantity to fulfill +
+
+
+ +
+
+ T-Shirt +
+ S +
+
+
+ 		+ 62783187 + +
+
+
+ + +
+
+
+ / 1207 +
+
+ 		+
+
+
+ + +
+
+
+ / 1197 +
+
+ 		+
+
+
+ + +
+
+
+ / 1213 +
+
+ 		+
+
+
+ + +
+
+
+ / 1213 +
+
+ 		+ + 0 + + / 2 +
+
+
+
+ + +
+
+
+ / 587 +
+
+ 		+ No Stock + +
+
+
+ + +
+
+
+ / 758 +
+
+ 		+
+
+
+ + +
+
+
+ / 727 +
+
+ 		+
+
+
+ + +
+
+
+ / 756 +
+
+ 		+ + 0 + + / 4 +
+
+
+ +
+
+ Orange Juice +
+ 5l +
+
+
+ 		+ 998323584 + +
+
+
+ + +
+
+
+ / 587 +
+
+ 		+ No Stock + @@ -64938,7 +65622,7 @@ exports[`Storyshots Views / Orders / Fulfill order default 1`] = `
- / 587 + / 586
+
+ Fulfilled from: +
+ Be stocked +
+
+
+
@@ -65454,7 +66160,7 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
- Fulfilled (1) + Cancelled (1)
@@ -65557,6 +66263,35 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = ` $79.71 + + +
+ Fulfilled from: +
+ C our wares +
+
+
+ Tracking Number: +
+ 01nn12399su12nndfsy +
+
+ +
@@ -66288,6 +67023,28 @@ exports[`Storyshots Views / Orders / Order details default 1`] = ` $79.71 + + +
+ Fulfilled from: +
+ Be stocked +
+
+
+ +
@@ -66451,24 +67208,38 @@ exports[`Storyshots Views / Orders / Order details default 1`] = ` $79.71 + + +
+ Fulfilled from: +
+ C our wares +
+
+
+ Tracking Number: +
+ 01nn12399su12nndfsy +
+
+ +
-
- -
+ + +
+ Fulfilled from: +
+ Be stocked +
+
+
+ +
@@ -67441,24 +68234,38 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = ` $79.71 + + +
+ Fulfilled from: +
+ C our wares +
+
+
+ Tracking Number: +
+ 01nn12399su12nndfsy +
+
+ +
-
- -
+ + +
+ Fulfilled from: +
+ ... +
+
+
+ +
@@ -68816,6 +69645,28 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = ` $79.71 + + +
+ Fulfilled from: +
+ Be stocked +
+
+
+ +
@@ -68979,24 +69830,38 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = ` $79.71 + + +
+ Fulfilled from: +
+ C our wares +
+
+
+ Tracking Number: +
+ 01nn12399su12nndfsy +
+
+ +
-
- -
+ + +
+ Fulfilled from: +
+ Be stocked +
+
+
+ +
@@ -69969,24 +70856,38 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = ` $79.71 + + +
+ Fulfilled from: +
+ C our wares +
+
+
+ Tracking Number: +
+ 01nn12399su12nndfsy +
+
+ +
-
- -
+ + +
+ Fulfilled from: +
+ Be stocked +
+
+
+ +
@@ -70959,24 +71882,38 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = ` $79.71 + + +
+ Fulfilled from: +
+ C our wares +
+
+
+ Tracking Number: +
+ 01nn12399su12nndfsy +
+
+ +
-
- -
+ + +
+ Fulfilled from: +
+ Be stocked +
+
+
+ +
@@ -71949,24 +72908,38 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = ` $79.71 + + +
+ Fulfilled from: +
+ C our wares +
+
+
+ Tracking Number: +
+ 01nn12399su12nndfsy +
+
+ +
-
- -
+ + +
+ Fulfilled from: +
+ Be stocked +
+
+
+ +
@@ -72939,24 +73934,38 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = ` $79.71 + + +
+ Fulfilled from: +
+ C our wares +
+
+
+ Tracking Number: +
+ 01nn12399su12nndfsy +
+
+ +
-
- -
+ + +
+ Fulfilled from: +
+ Be stocked +
+
+
+ +
@@ -73929,24 +74960,38 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = ` $79.71 + + +
+ Fulfilled from: +
+ C our wares +
+
+
+ Tracking Number: +
+ 01nn12399su12nndfsy +
+
+ +
-
- -
+ + +
+ Fulfilled from: +
+ Be stocked +
+
+
+ +
@@ -74919,24 +75986,38 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = ` $79.71 + + +
+ Fulfilled from: +
+ C our wares +
+
+
+ Tracking Number: +
+ 01nn12399su12nndfsy +
+
+ +
-
- -
+ + +
+ Fulfilled from: +
+ Be stocked +
+
+
+ +
@@ -75909,24 +77012,38 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = ` $79.71 + + +
+ Fulfilled from: +
+ C our wares +
+
+
+ Tracking Number: +
+ 01nn12399su12nndfsy +
+
+ +
-
- -
+ + +
+ Fulfilled from: +
+ Be stocked +
+
+
+ +
@@ -76899,24 +78038,38 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = ` $79.71 + + +
+ Fulfilled from: +
+ C our wares +
+
+
+ Tracking Number: +
+ 01nn12399su12nndfsy +
+
+ +
-
- -
+ + +
+ Fulfilled from: +
+ Be stocked +
+
+
+ +
@@ -77889,24 +79064,38 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = ` $79.71 + + +
+ Fulfilled from: +
+ C our wares +
+
+
+ Tracking Number: +
+ 01nn12399su12nndfsy +
+
+ +
-
- -
- - - - +
- - - @@ -80772,21 +81928,6 @@ exports[`Storyshots Views / Orders / Order list default 1`] = ` - - - @@ -80835,21 +81976,6 @@ exports[`Storyshots Views / Orders / Order list default 1`] = ` - - - @@ -80898,21 +82024,6 @@ exports[`Storyshots Views / Orders / Order list default 1`] = ` - - - @@ -80961,21 +82072,6 @@ exports[`Storyshots Views / Orders / Order list default 1`] = ` - - - @@ -81024,21 +82120,6 @@ exports[`Storyshots Views / Orders / Order list default 1`] = ` - - - @@ -81087,21 +82168,6 @@ exports[`Storyshots Views / Orders / Order list default 1`] = ` - - - @@ -81150,21 +82216,6 @@ exports[`Storyshots Views / Orders / Order list default 1`] = ` - - - @@ -81213,21 +82264,6 @@ exports[`Storyshots Views / Orders / Order list default 1`] = ` - - - @@ -81276,21 +82312,6 @@ exports[`Storyshots Views / Orders / Order list default 1`] = ` - - - @@ -81339,21 +82360,6 @@ exports[`Storyshots Views / Orders / Order list default 1`] = ` - - - @@ -81402,21 +82408,6 @@ exports[`Storyshots Views / Orders / Order list default 1`] = ` - - - @@ -81465,21 +82456,6 @@ exports[`Storyshots Views / Orders / Order list default 1`] = ` - - - @@ -81528,21 +82504,6 @@ exports[`Storyshots Views / Orders / Order list default 1`] = ` - - - @@ -81591,21 +82552,6 @@ exports[`Storyshots Views / Orders / Order list default 1`] = ` - - - @@ -81654,21 +82600,6 @@ exports[`Storyshots Views / Orders / Order list default 1`] = ` - - - @@ -81717,21 +82648,6 @@ exports[`Storyshots Views / Orders / Order list default 1`] = ` - - - @@ -81780,21 +82696,6 @@ exports[`Storyshots Views / Orders / Order list default 1`] = ` - - - @@ -81843,21 +82744,6 @@ exports[`Storyshots Views / Orders / Order list default 1`] = ` - - - @@ -81906,21 +82792,6 @@ exports[`Storyshots Views / Orders / Order list default 1`] = ` - - - @@ -82116,27 +82987,7 @@ exports[`Storyshots Views / Orders / Order list loading 1`] = ` - - - - +
- - - @@ -82573,9 +83407,7 @@ exports[`Storyshots Views / Orders / Order list when no data 1`] = ` - +
No orders found From 57038445c928bc22497ff57d8cb826832bdd6b50 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Tue, 28 Apr 2020 17:00:52 +0200 Subject: [PATCH 19/19] Update snapshots --- .../__snapshots__/Stories.test.ts.snap | 562 +++++++++--------- 1 file changed, 281 insertions(+), 281 deletions(-) diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap index d110e1f55..7d474c182 100644 --- a/src/storybook/__snapshots__/Stories.test.ts.snap +++ b/src/storybook/__snapshots__/Stories.test.ts.snap @@ -64672,6 +64672,281 @@ exports[`Storyshots Views / Orders / Fulfill order default 1`] = ` > No Stock + +
+
+
+ + +
+
+
+ / 758 +
+
+ + +
+
+
+ + +
+
+
+ / 727 +
+
+ + +
+
+
+ + +
+
+
+ / 756 +
+
+ + + + 0 + + / 4 + + + + +
+
+ +
+
+ Orange Juice +
+ 5l +
+
+
+ + + 998323584 + + +
+
+
+ + +
+
+
+ / 587 +
+
+ + + No Stock + + +
+
+
+ + +
+
+
+ / 586 +
+
+ + + No Stock + @@ -65307,281 +65582,6 @@ exports[`Storyshots Views / Orders / Fulfill order error 1`] = ` > No Stock - -
-
-
- - -
-
-
- / 758 -
-
- - -
-
-
- - -
-
-
- / 727 -
-
- - -
-
-
- - -
-
-
- / 756 -
-
- - - - 0 - - / 4 - - - - -
-
- -
-
- Orange Juice -
- 5l -
-
-
- - - 998323584 - - -
-
-
- - -
-
-
- / 587 -
-
- - - No Stock - - -
-
-
- - -
-
-
- / 586 -
-
- - - No Stock - @@ -99289,7 +99289,7 @@ exports[`Storyshots Views / Products / Create multiple variants / prices and SKU > ​ @@ -101232,7 +101232,7 @@ exports[`Storyshots Views / Products / Create multiple variants / prices and SKU > ​ @@ -129083,7 +129083,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors > ​ @@ -129892,7 +129892,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data > ​ @@ -139278,7 +139278,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = ` > ​ @@ -140073,7 +140073,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = ` > ​