@blocklet/payment-react
Version:
Reusable react components for payment kit v2
85 lines (84 loc) • 3.26 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { Box, Stack, Typography } from "@mui/material";
import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
import { tSafe } from "../../utils/format.js";
function splitPrice(total) {
if (!total) return { prefix: "", integer: "0", decimal: "", suffix: "" };
const trimmed = total.trim();
if (trimmed.startsWith("$")) {
const numPart = trimmed.slice(1).trim();
const dotIdx2 = numPart.indexOf(".");
if (dotIdx2 >= 0) {
return {
prefix: "$",
integer: numPart.slice(0, dotIdx2),
decimal: `.${numPart.slice(dotIdx2 + 1)}`,
suffix: ""
};
}
return { prefix: "$", integer: numPart, decimal: "", suffix: "" };
}
const parts = trimmed.split(/\s+/);
const numStr = parts[0] || "0";
const unit = parts.slice(1).join(" ");
const dotIdx = numStr.indexOf(".");
if (dotIdx >= 0) {
return {
prefix: "",
integer: numStr.slice(0, dotIdx),
decimal: `.${numStr.slice(dotIdx + 1)}`,
suffix: unit
};
}
return { prefix: "", integer: numStr, decimal: "", suffix: unit };
}
export default function TotalDisplay({ label = void 0, total, usdEquivalent = void 0 }) {
const { t } = useLocaleContext();
const { prefix, integer, decimal, suffix } = splitPrice(total);
return /* @__PURE__ */ jsxs(Box, { sx: { pt: 4, borderTop: "1px solid", borderColor: "divider" }, children: [
/* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "flex-end", children: [
/* @__PURE__ */ jsx(Stack, { spacing: 0.5, sx: { pb: 1 }, children: /* @__PURE__ */ jsx(
Typography,
{
sx: {
fontSize: 12,
fontWeight: 700,
letterSpacing: "0.02em",
color: "text.disabled"
},
children: label || tSafe(t, "payment.checkout.totalDueToday", "Total due today")
}
) }),
/* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "baseline", lineHeight: 1 }, children: [
prefix && /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontSize: 36, fontWeight: 500, color: "text.primary", opacity: 0.4 }, children: prefix }),
/* @__PURE__ */ jsx(
Typography,
{
component: "span",
sx: {
fontSize: { xs: 54, md: 72 },
fontWeight: 800,
lineHeight: 1,
letterSpacing: "-0.04em",
color: "text.primary"
},
children: integer
}
),
decimal && /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontSize: 36, fontWeight: 300, color: "text.primary", opacity: 0.3 }, children: decimal }),
suffix && /* @__PURE__ */ jsx(
Typography,
{
component: "span",
sx: { fontSize: 20, fontWeight: 700, color: "text.disabled", ml: 1, textTransform: "uppercase" },
children: suffix
}
)
] })
] }),
usdEquivalent && /* @__PURE__ */ jsxs(Typography, { sx: { fontSize: 12, color: "text.disabled", textAlign: "right", mt: 0.5, fontWeight: 500 }, children: [
"\u2248 ",
usdEquivalent
] })
] });
}