@blocklet/payment-react
Version:
Reusable react components for payment kit v2
80 lines (79 loc) • 2.56 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
import { LockOutlined } from "@mui/icons-material";
import { Box, Typography } from "@mui/material";
import { useMemo } from "react";
import { formatExchangeRate } from "../libs/util.js";
function getQuoteLockInfo(items, currency) {
if (!items?.length || !currency) {
return null;
}
const dynamicItems = items.filter((item) => {
const price = item.upsell_price || item.price;
return price?.pricing_type === "dynamic" && item?.quoted_amount;
});
if (!dynamicItems.length) {
return null;
}
let expiresAt = null;
let exchangeRate = null;
dynamicItems.forEach((item) => {
if (item?.expires_at) {
expiresAt = expiresAt === null ? item?.expires_at : Math.min(expiresAt, item?.expires_at);
}
if (!exchangeRate) {
exchangeRate = item?.exchange_rate || null;
}
});
return {
exchangeRate,
tokenSymbol: currency.symbol,
baseCurrency: (dynamicItems[0]?.upsell_price || dynamicItems[0]?.price)?.base_currency || "USD",
expiresAt
};
}
export default function QuoteLockBanner({ items, currency }) {
const { t } = useLocaleContext();
const quoteLockInfo = useMemo(() => getQuoteLockInfo(items, currency), [items, currency]);
if (!quoteLockInfo || !quoteLockInfo.exchangeRate) {
return null;
}
const formattedRateValue = formatExchangeRate(quoteLockInfo.exchangeRate);
let formattedRate = "";
if (formattedRateValue) {
formattedRate = quoteLockInfo.baseCurrency === "USD" ? `$${formattedRateValue}` : `${formattedRateValue} ${quoteLockInfo.baseCurrency}`;
}
return /* @__PURE__ */ jsx(
Box,
{
sx: {
bgcolor: "action.hover",
border: "1px solid",
borderColor: "divider",
borderRadius: 1,
px: 2,
py: 1.5,
mb: 2
},
children: /* @__PURE__ */ jsxs(
Box,
{
sx: {
display: "flex",
alignItems: "center",
gap: 1.5,
flexWrap: "wrap"
},
children: [
/* @__PURE__ */ jsx(LockOutlined, { sx: { fontSize: "1rem", color: "success.main" } }),
/* @__PURE__ */ jsx(Typography, { sx: { fontSize: "0.875rem", color: "text.primary", flex: 1 }, children: t("payment.checkout.quote.dynamicPricingInfo", {
symbol: quoteLockInfo.tokenSymbol,
rate: formattedRate,
currency: ""
}) })
]
}
)
}
);
}