saleor-dashboard/src/orders/components/OrderCancelDialog/OrderCancelDialog.tsx

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 {
  createStyles,
  Theme,
  withStyles,
  WithStyles
} from "@material-ui/core/styles";
import React from "react";

import ConfirmButton, {
  ConfirmButtonTransitionState
} from "@saleor/components/ConfirmButton";
import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
import Form from "@saleor/components/Form";
import i18n from "../../../i18n";

export interface FormData {
  restock: boolean;
}

const styles = (theme: Theme) =>
  createStyles({
    deleteButton: {
      "&:hover": {
        backgroundColor: theme.palette.error.main
      },
      backgroundColor: theme.palette.error.main,
      color: theme.palette.error.contrastText
    }
  });

interface OrderCancelDialogProps extends WithStyles<typeof styles> {
  confirmButtonState: ConfirmButtonTransitionState;
  number: string;
  open: boolean;
  onClose?();
  onSubmit(data: FormData);
}

const OrderCancelDialog = withStyles(styles, { name: "OrderCancelDialog" })(
  ({
    classes,
    confirmButtonState,
    number: orderNumber,
    open,
    onSubmit,
    onClose
  }: OrderCancelDialogProps) => (
    <Dialog onClose={onClose} open={open}>
      <Form
        initial={{
          restock: true
        }}
        onSubmit={onSubmit}
      >
        {({ data, change }) => {
          return (
            <>
              <DialogTitle>
                {i18n.t("Cancel order", { context: "title" })}
              </DialogTitle>
              <DialogContent>
                <DialogContentText
                  dangerouslySetInnerHTML={{
                    __html: i18n.t(
                      "Are you sure you want to cancel order <strong>{{ orderNumber }}</strong>?",
                      { orderNumber }
                    )
                  }}
                />
                <ControlledCheckbox
                  checked={data.restock}
                  label={i18n.t("Release all stock allocated to this order")}
                  name="restock"
                  onChange={change}
                />
              </DialogContent>
              <DialogActions>
                <Button onClick={onClose}>
                  {i18n.t("Back", { context: "button" })}
                </Button>
                <ConfirmButton
                  transitionState={confirmButtonState}
                  className={classes.deleteButton}
                  variant="contained"
                  type="submit"
                >
                  {i18n.t("Cancel order", { context: "button" })}
                </ConfirmButton>
              </DialogActions>
            </>
          );
        }}
      </Form>
    </Dialog>
  )
);
OrderCancelDialog.displayName = "OrderCancelDialog";
export default OrderCancelDialog;