@blocklet/payment-react
Version:
Reusable react components for payment kit v2
84 lines (83 loc) • 3.3 kB
JavaScript
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
import { Box, Skeleton, Stack, Tooltip, Typography } from "@mui/material";
import PaymentAmount from "../amount.js";
import QuoteDetailsPanel from "../../components/quote-details-panel.js";
export default function TotalSection({
totalAmountText,
totalUsdDisplay,
currency,
hasDynamicPricing,
rateDisplay,
rateInfo,
quoteDetailRows,
currentSlippagePercent,
slippageConfig = void 0,
isPriceLocked,
isSubscription,
completed = false,
onSlippageChange = void 0,
isStripePayment = false,
thenInfo = "",
isRateLoading = false
}) {
const { t } = useLocaleContext();
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsxs(
Stack,
{
sx: {
display: "flex",
justifyContent: "space-between",
flexDirection: "row",
alignItems: "flex-start",
width: "100%"
},
children: [
/* @__PURE__ */ jsx(Box, { className: "base-label", children: t("common.total") }),
/* @__PURE__ */ jsxs(Stack, { sx: { alignItems: "flex-end" }, children: [
isRateLoading ? /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: 100, height: 24 }) : /* @__PURE__ */ jsx(PaymentAmount, { amount: totalAmountText, sx: { fontSize: "16px" } }),
hasDynamicPricing && !isStripePayment && !isRateLoading && (totalUsdDisplay ? /* @__PURE__ */ jsxs(Typography, { sx: { fontSize: "0.7875rem", color: "text.lighter" }, children: [
"\u2248 $",
totalUsdDisplay
] }) : /* @__PURE__ */ jsx(Tooltip, { title: t("payment.checkout.quote.referenceUnavailable"), placement: "top", children: /* @__PURE__ */ jsx(Box, { component: "span", children: /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "0.7875rem", color: "text.lighter" }, children: "\u2248 \u2014" }) }) })),
hasDynamicPricing && !isStripePayment && /* @__PURE__ */ jsx(
QuoteDetailsPanel,
{
rateLine: rateDisplay ? t("payment.checkout.quote.rateLine", { symbol: currency.symbol, rate: rateDisplay }) : "",
rows: quoteDetailRows,
isSubscription,
slippageValue: currentSlippagePercent,
slippageConfig,
onSlippageChange: !completed && onSlippageChange ? onSlippageChange : void 0,
exchangeRate: rateInfo.exchangeRate,
baseCurrency: rateInfo.baseCurrency,
disabled: isPriceLocked
}
)
] })
]
}
),
thenInfo && /* @__PURE__ */ jsxs(
Stack,
{
sx: {
display: "flex",
justifyContent: "space-between",
flexDirection: "row",
alignItems: "flex-start",
width: "100%",
borderTop: "1px solid",
borderColor: "divider",
pt: 1,
mt: 1
},
children: [
/* @__PURE__ */ jsx(Box, { className: "base-label", children: t("common.nextCharge") }),
/* @__PURE__ */ jsx(Typography, { sx: { fontSize: "16px", color: "text.secondary" }, children: thenInfo })
]
}
)
] });
}