Add warehouse selection to restock items

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"

src/orders/components/OrderFulfillment/OrderFulfillment.tsx

@@ -144,7 +144,7 @@ const OrderFulfillment: React.FC<OrderFulfillmentProps> = props => {
               menuItems={[
                 {
                   label: intl.formatMessage({
-                    defaultMessage: "Cancel shipment",
+                    defaultMessage: "Cancel Fulfillment",
                     description: "button"
                   }),
                   onSelect: onOrderFulfillmentCancel

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

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)