@blocklet/payment-react
Version:
Reusable react components for payment kit v2
49 lines (48 loc) • 2.1 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { Stack, Typography } from "@mui/material";
import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
import { INTERVAL_LOCALE_KEY } from "../../utils/format.js";
export default function TrialInfo({ trial, mode, items }) {
const { t } = useLocaleContext();
if (trial.active && trial.afterTrialPrice) {
return /* @__PURE__ */ jsxs(
Stack,
{
direction: "row",
justifyContent: "space-between",
alignItems: "center",
sx: { borderTop: "1px solid", borderColor: "divider", pt: 1, mt: 1 },
children: [
/* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary", fontSize: 14 }, children: t("common.nextCharge") }),
/* @__PURE__ */ jsxs(Typography, { sx: { fontSize: 16, color: "text.secondary" }, children: [
trial.afterTrialPrice,
trial.afterTrialInterval ? ` ${t(INTERVAL_LOCALE_KEY[trial.afterTrialInterval] || "")}` : ""
] })
]
}
);
}
if (!trial.active && ["subscription", "setup"].includes(mode)) {
const meteredItem = items.find(
(item) => (item.upsell_price || item.price)?.recurring?.usage_type === "metered"
);
if (!meteredItem) return null;
const meteredInterval = (meteredItem.upsell_price || meteredItem.price)?.recurring?.interval;
if (!meteredInterval) return null;
const recurringText = t("common.per", { interval: t(`common.${meteredInterval}`) });
return /* @__PURE__ */ jsxs(
Stack,
{
direction: "row",
justifyContent: "space-between",
alignItems: "center",
sx: { borderTop: "1px solid", borderColor: "divider", pt: 1, mt: 1 },
children: [
/* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary", fontSize: 14, fontWeight: 600 }, children: t("common.nextCharge") }),
/* @__PURE__ */ jsx(Typography, { sx: { fontSize: 16, color: "text.secondary" }, children: t("payment.checkout.metered", { recurring: recurringText }) })
]
}
);
}
return null;
}