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

Add warehouse selection to restock items

Browse source
This commit is contained in:
dominik-zeglen 2020-04-22 01:09:51 +02:00
parent 596cc41a7f
commit 7cc3492e71
4 changed files with 102 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/intl.ts
View file

@ -81,6 +81,10 @@ export const commonMessages = defineMessages({
});
export const buttonMessages = defineMessages({
accept: {
defaultMessage: "Accept",
description: "button"
},
back: {
defaultMessage: "Back",
description: "button"

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

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

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

@ -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
enableOverflow: {
overflow: "visible"
},
backgroundColor: theme.palette.error.main,
color: theme.palette.error.contrastText
paragraph: {
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">
<Form initial={{ restock: true }} onSubmit={onConfirm}>
{({ change, data, submit }) => (
<Dialog
classes={{
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>
<DialogContentText>
<FormattedMessage defaultMessage="Are you sure you want to cancel this fulfillment?" />
<DialogContent className={classes.enableOverflow}>
<DialogContentText className={classes.paragraph}>
<FormattedMessage defaultMessage="Are you sure you want to cancel fulfillment? Canceling a fulfillment will restock products at a selected warehouse." />
</DialogContentText>
<ControlledCheckbox
checked={data.restock}
<div className={classes.selectCcontainer}>
<SingleAutocompleteSelectField
choices={choices}
displayValue={displayValue}
label={intl.formatMessage({
defaultMessage: "Restock items?",
description: "switch button"
defaultMessage: "Select Warehouse",
description: "select warehouse to restock items"
})}
name="restock"
onChange={change}
name="warehouse"
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
defaultMessage="Cancel fulfillment"
description="button"
/>
<FormattedMessage {...buttonMessages.accept} />
</ConfirmButton>
</DialogActions>
</>
)}
);
}}
</Form>
</Dialog>
);

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

@ -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)