@blocklet/payment-react
Version:
Reusable react components for payment kit v2
119 lines (118 loc) • 4.52 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import TrendingDownIcon from "@mui/icons-material/TrendingDown";
import { Box, CircularProgress, Stack, Typography } from "@mui/material";
import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
import { INTERVAL_LOCALE_KEY } from "../../utils/format.js";
export default function BillingToggle({ billingInterval }) {
const { t } = useLocaleContext();
if (!billingInterval?.available?.length || billingInterval.available.length <= 1) {
return null;
}
const best = billingInterval.available.reduce(
(a, b) => Number(b.savings || 0) > Number(a.savings || 0) ? b : a
);
return /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 2, sx: { mb: 3 }, children: [
/* @__PURE__ */ jsx(
Stack,
{
direction: "row",
alignItems: "center",
sx: {
bgcolor: "background.paper",
borderRadius: "9999px",
border: "1px solid",
borderColor: "divider",
p: "4px",
display: "inline-flex",
boxShadow: (theme) => theme.palette.mode === "dark" ? "0 1px 2px 0 rgba(0,0,0,0.3)" : "0 1px 2px 0 rgba(0,0,0,0.05)"
},
children: billingInterval.available.map((option) => {
const isSelected = option.interval === billingInterval.current;
const selectedSx = {
bgcolor: (th) => th.palette.mode === "dark" ? "rgba(156,106,222,0.25)" : "rgba(156,106,222,0.15)",
color: "primary.main",
backdropFilter: "blur(8px)",
WebkitBackdropFilter: "blur(8px)",
boxShadow: (th) => th.palette.mode === "dark" ? "0 2px 8px rgba(156,106,222,0.2), inset 0 1px 0 rgba(255,255,255,0.06)" : "0 2px 8px rgba(156,106,222,0.15), inset 0 1px 0 rgba(255,255,255,0.5)",
border: "1px solid",
borderColor: (th) => th.palette.mode === "dark" ? "rgba(156,106,222,0.3)" : "rgba(156,106,222,0.2)"
};
const unselectedSx = {
color: "text.secondary",
border: "1px solid transparent",
"&:hover": { color: "text.primary" }
};
return /* @__PURE__ */ jsx(
Box,
{
onClick: () => {
if (option.interval !== billingInterval.current && !billingInterval.switching) {
billingInterval.switch(option.interval);
}
},
sx: {
px: 3.5,
py: 1,
borderRadius: "9999px",
cursor: "pointer",
transition: "all 0.3s ease",
userSelect: "none",
...isSelected ? selectedSx : unselectedSx
},
children: billingInterval.switching && isSelected ? /* @__PURE__ */ jsx(CircularProgress, { size: 14, color: "inherit", sx: { my: "1px" } }) : /* @__PURE__ */ jsx(
Typography,
{
component: "span",
sx: {
fontSize: 14,
fontWeight: 700,
color: "inherit",
lineHeight: 1
},
children: t(INTERVAL_LOCALE_KEY[option.interval] || option.interval)
}
)
},
option.interval
);
})
}
),
best.savings && Number(best.savings) > 0 && /* @__PURE__ */ jsxs(
Stack,
{
direction: "row",
alignItems: "center",
spacing: 0.75,
sx: {
px: 1.5,
py: 0.75,
bgcolor: (theme) => theme.palette.mode === "dark" ? "rgba(18,184,134,0.1)" : "#ebfef5",
color: "#12b886",
fontSize: 11,
fontWeight: 700,
borderRadius: "9999px",
border: "1px solid",
borderColor: (theme) => theme.palette.mode === "dark" ? "rgba(18,184,134,0.2)" : "#d3f9e8",
textTransform: "uppercase",
letterSpacing: "0.05em"
},
children: [
/* @__PURE__ */ jsx(TrendingDownIcon, { sx: { fontSize: 14 } }),
/* @__PURE__ */ jsxs(
Typography,
{
component: "span",
sx: { fontSize: "inherit", fontWeight: "inherit", color: "inherit", lineHeight: 1 },
children: [
"SAVE ",
best.savings,
"%"
]
}
)
]
}
)
] });
}