@blocklet/payment-react
Version:
Reusable react components for payment kit v2
108 lines (107 loc) • 5 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Stack, Typography } from "@mui/material";
import WarningAmberIcon from "@mui/icons-material/WarningAmber";
import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
export default function PriceChangeConfirm({
open,
previewRate = void 0,
submitRate = void 0,
changePercent,
onConfirm,
onCancel,
loading = false
}) {
const { t } = useLocaleContext();
const changeDirection = changePercent > 0 ? "increased" : "decreased";
const absChangePercent = Math.abs(changePercent);
return /* @__PURE__ */ jsxs(
Dialog,
{
open,
onClose: loading ? void 0 : onCancel,
maxWidth: "sm",
fullWidth: true,
PaperProps: {
sx: {
borderRadius: 2
}
},
children: [
/* @__PURE__ */ jsxs(
DialogTitle,
{
sx: {
display: "flex",
alignItems: "center",
gap: 1,
pb: 1
},
children: [
/* @__PURE__ */ jsx(WarningAmberIcon, { color: "warning" }),
/* @__PURE__ */ jsx(Typography, { variant: "h6", component: "span", children: t("payment.checkout.priceChange.title", { fallback: "Price Changed" }) })
]
}
),
/* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsxs(Stack, { spacing: 2, children: [
/* @__PURE__ */ jsx(Typography, { variant: "body1", color: "text.secondary", children: t("payment.checkout.priceChange.description", {
fallback: `The exchange rate has ${changeDirection} by ${absChangePercent.toFixed(2)}% since you started this checkout.`,
direction: changeDirection,
percent: absChangePercent.toFixed(2)
}) }),
(previewRate || submitRate) && /* @__PURE__ */ jsx(
Box,
{
sx: {
bgcolor: "action.hover",
borderRadius: 1,
p: 2
},
children: /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
previewRate && /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between" }, children: [
/* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "text.secondary", children: [
t("payment.checkout.priceChange.previewRate", { fallback: "Preview Rate" }),
":"
] }),
/* @__PURE__ */ jsx(Typography, { variant: "body2", fontFamily: "monospace", children: previewRate })
] }),
submitRate && /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between" }, children: [
/* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "text.secondary", children: [
t("payment.checkout.priceChange.currentRate", { fallback: "Current Rate" }),
":"
] }),
/* @__PURE__ */ jsx(Typography, { variant: "body2", fontFamily: "monospace", children: submitRate })
] }),
/* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between" }, children: [
/* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "text.secondary", children: [
t("payment.checkout.priceChange.change", { fallback: "Change" }),
":"
] }),
/* @__PURE__ */ jsxs(
Typography,
{
variant: "body2",
fontWeight: "bold",
color: changePercent > 0 ? "error.main" : "success.main",
children: [
changePercent > 0 ? "+" : "",
changePercent.toFixed(2),
"%"
]
}
)
] })
] })
}
),
/* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: t("payment.checkout.priceChange.confirm", {
fallback: "Do you want to continue with the new price?"
}) })
] }) }),
/* @__PURE__ */ jsxs(DialogActions, { sx: { px: 3, pb: 2 }, children: [
/* @__PURE__ */ jsx(Button, { onClick: onCancel, disabled: loading, variant: "outlined", color: "inherit", children: t("payment.checkout.priceChange.cancel", { fallback: "Cancel" }) }),
/* @__PURE__ */ jsx(Button, { onClick: onConfirm, disabled: loading, variant: "contained", color: "primary", autoFocus: true, children: loading ? t("payment.checkout.priceChange.confirming", { fallback: "Confirming..." }) : t("payment.checkout.priceChange.accept", { fallback: "Accept & Continue" }) })
] })
]
}
);
}