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

93 lines
2.5 KiB
TypeScript
Raw Normal View History

2019-06-19 14:40:52 +00:00
import DialogContentText from "@material-ui/core/DialogContentText";
import * as React from "react";
import ActionDialog from "@saleor/components/ActionDialog";
import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
import i18n from "../../../i18n";
export type OrderDraftFinalizeWarning =
| "no-shipping"
| "no-billing"
| "no-user"
| "no-shipping-method"
| "unnecessary-shipping-method";
export interface OrderDraftFinalizeDialogProps {
confirmButtonState: ConfirmButtonTransitionState;
open: boolean;
orderNumber: string;
warnings: OrderDraftFinalizeWarning[];
onClose: () => void;
onConfirm: () => void;
}
const warningToText = (warning: OrderDraftFinalizeWarning) => {
switch (warning) {
case "no-shipping":
return i18n.t("No shipping address");
case "no-billing":
return i18n.t("No billing address");
case "no-user":
return i18n.t("No user information");
case "no-shipping-method":
return i18n.t("Some products require shipping, but no method provided");
case "unnecessary-shipping-method":
return i18n.t("Shipping method provided, but no product requires it");
}
};
const OrderDraftFinalizeDialog: React.StatelessComponent<
OrderDraftFinalizeDialogProps
> = ({
confirmButtonState,
open,
warnings,
onClose,
onConfirm,
orderNumber
}) => (
<ActionDialog
onClose={onClose}
onConfirm={onConfirm}
open={open}
title={i18n.t("Finalize draft order", {
context: "modal title"
})}
confirmButtonLabel={
warnings.length > 0 ? i18n.t("Finalize anyway") : i18n.t("Finalize")
}
confirmButtonState={confirmButtonState}
variant={warnings.length > 0 ? "delete" : "default"}
>
<DialogContentText component="div">
{warnings.length > 0 && (
<>
<p>
{i18n.t(
"There are missing or incorrect informations about this order:"
)}
</p>
<ul>
{warnings.map(warning => (
<li key={warning}>{warningToText(warning)}</li>
))}
</ul>
</>
)}
<span
dangerouslySetInnerHTML={{
__html: i18n.t(
"Are you sure you want to finalize draft <strong>#{{ number }}</strong>?",
{
context: "modal",
number: orderNumber
}
)
}}
/>
</DialogContentText>
</ActionDialog>
);
OrderDraftFinalizeDialog.displayName = "OrderDraftFinalize";
export default OrderDraftFinalizeDialog;