@blocklet/payment-react
Version:
Reusable react components for payment kit v2
126 lines (125 loc) • 4.57 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
module.exports = BillingToggle;
var _jsxRuntime = require("react/jsx-runtime");
var _TrendingDown = _interopRequireDefault(require("@mui/icons-material/TrendingDown"));
var _material = require("@mui/material");
var _context = require("@arcblock/ux/lib/Locale/context");
var _format = require("../../utils/format");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function BillingToggle({
billingInterval
}) {
const {
t
} = (0, _context.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__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
direction: "row",
alignItems: "center",
spacing: 2,
sx: {
mb: 3
},
children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.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__ */(0, _jsxRuntime.jsx)(_material.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__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {
size: 14,
color: "inherit",
sx: {
my: "1px"
}
}) : /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
component: "span",
sx: {
fontSize: 14,
fontWeight: 700,
color: "inherit",
lineHeight: 1
},
children: t(_format.INTERVAL_LOCALE_KEY[option.interval] || option.interval)
})
}, option.interval);
})
}), best.savings && Number(best.savings) > 0 && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.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__ */(0, _jsxRuntime.jsx)(_TrendingDown.default, {
sx: {
fontSize: 14
}
}), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
component: "span",
sx: {
fontSize: "inherit",
fontWeight: "inherit",
color: "inherit",
lineHeight: 1
},
children: ["SAVE ", best.savings, "%"]
})]
})]
});
}