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)