@blocklet/payment-react
Version:
Reusable react components for payment kit v2
59 lines (58 loc) • 2.03 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { Alert, AlertTitle, Typography, Button, Box, CircularProgress } from "@mui/material";
import { ErrorOutline, Refresh } from "@mui/icons-material";
import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
import { useState } from "react";
export default function DynamicPricingUnavailable({
error = void 0,
onRetry = void 0,
showRetry = true,
sx = void 0
}) {
const { t } = useLocaleContext();
const [retrying, setRetrying] = useState(false);
if (error) {
console.error("[Dynamic Pricing Error]", error);
}
const handleRetry = async () => {
if (!onRetry || retrying) return;
setRetrying(true);
try {
await onRetry();
} finally {
setRetrying(false);
}
};
return /* @__PURE__ */ jsx(
Alert,
{
severity: "warning",
icon: /* @__PURE__ */ jsx(ErrorOutline, {}),
sx: {
borderRadius: 2,
"& .MuiAlert-message": {
width: "100%"
},
...sx
},
children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", width: "100%" }, children: [
/* @__PURE__ */ jsxs(Box, { children: [
/* @__PURE__ */ jsx(AlertTitle, { sx: { fontWeight: 600 }, children: t("payment.dynamicPricing.unavailable.title") }),
/* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: "text.secondary", mt: 0.5 }, children: t("payment.dynamicPricing.unavailable.message") })
] }),
showRetry && onRetry && /* @__PURE__ */ jsx(
Button,
{
size: "small",
variant: "outlined",
onClick: handleRetry,
disabled: retrying,
startIcon: retrying ? /* @__PURE__ */ jsx(CircularProgress, { size: 16 }) : /* @__PURE__ */ jsx(Refresh, {}),
sx: { ml: 2, flexShrink: 0 },
children: t("payment.dynamicPricing.unavailable.retry")
}
)
] })
}
);
}