@blocklet/payment-react
Version:
Reusable react components for payment kit v2
217 lines (216 loc) • 7.51 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
module.exports = AutoTopupProductCard;
var _jsxRuntime = require("react/jsx-runtime");
var _material = require("@mui/material");
var _context = require("@arcblock/ux/lib/Locale/context");
var _react = require("react");
var _productCard = _interopRequireDefault(require("../../payment/product-card"));
var _util = require("../../libs/util");
var _quoteDetailsPanel = _interopRequireDefault(require("../quote-details-panel"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function AutoTopupProductCard({
product,
price,
currency,
quantity,
onQuantityChange,
maxQuantity = 99,
minQuantity = 1,
creditCurrency,
exchangeRate = null,
isDynamicPricing = false,
exchangeRateData = null,
slippageConfig = null,
slippagePercent = 0.5,
onSlippageChange = void 0,
disabled = false
}) {
const {
t,
locale
} = (0, _context.useLocaleContext)();
const [localQuantity, setLocalQuantity] = (0, _react.useState)(quantity);
const localQuantityNum = Number(localQuantity) || 0;
const {
paymentAmount,
usdReferenceDisplay
} = (0, _react.useMemo)(() => {
if (!isDynamicPricing || !exchangeRate || !price?.base_amount) {
return {
paymentAmount: (0, _util.formatPrice)(price, currency, product?.unit_label, localQuantity, true),
usdReferenceDisplay: null
};
}
const baseAmount = Number(price.base_amount) * localQuantityNum;
const rate = Number(exchangeRate);
if (rate <= 0 || !Number.isFinite(baseAmount)) {
return {
paymentAmount: (0, _util.formatPrice)(price, currency, product?.unit_label, localQuantity, true),
usdReferenceDisplay: null
};
}
const tokenAmount = baseAmount / rate;
const formattedToken = (0, _util.formatDynamicPrice)(tokenAmount, true, 6);
const formattedUsd = (0, _util.formatUsdAmount)(baseAmount.toString(), locale);
return {
paymentAmount: `${formattedToken} ${currency.symbol}`,
usdReferenceDisplay: formattedUsd ? `\u2248 $${formattedUsd}` : null
};
}, [isDynamicPricing, exchangeRate, price, currency, product?.unit_label, localQuantity, localQuantityNum, locale]);
const handleQuantityChange = newQuantity => {
if (!newQuantity) {
setLocalQuantity(void 0);
return;
}
if (newQuantity >= minQuantity && newQuantity <= maxQuantity) {
setLocalQuantity(newQuantity);
onQuantityChange(newQuantity);
}
};
const handleQuantityInputChange = event => {
const value = parseInt(event.target.value || "0", 10);
if (!Number.isNaN(value)) {
handleQuantityChange(value);
}
};
const creditUnitAmount = Number(price.metadata?.credit_config?.credit_amount || 0);
return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Card, {
variant: "outlined",
sx: {
p: 2
},
children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
direction: "row",
spacing: 2,
sx: {
flexDirection: {
xs: "column",
sm: "row"
},
alignItems: {
xs: "flex-start",
sm: "center"
},
justifyContent: {
xs: "flex-start",
sm: "space-between"
}
},
children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
direction: "row",
spacing: 2,
sx: {
alignItems: "center",
flex: 1
},
children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_productCard.default, {
name: product?.name || "",
description: t("payment.autoTopup.creditsIncluded", {
num: (0, _util.formatCreditForCheckout)((0, _util.formatNumber)(creditUnitAmount * localQuantityNum), creditCurrency?.symbol || "", locale)
}),
logo: product?.images?.[0],
size: 40
})
}), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
direction: "row",
spacing: 1,
sx: {
alignItems: "center",
alignSelf: {
xs: "flex-end",
sm: "center"
}
},
children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
variant: "body2",
sx: {
color: "text.secondary",
minWidth: "fit-content"
},
children: [t("common.quantity"), ":"]
}), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.TextField, {
size: "small",
value: localQuantity,
onChange: handleQuantityInputChange,
type: "number",
sx: {
"& .MuiInputBase-root": {
height: 32
}
},
slotProps: {
htmlInput: {
min: 0,
max: maxQuantity,
style: {
textAlign: "center",
padding: "4px 8px"
}
}
}
})]
})]
}), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
direction: "row",
sx: {
justifyContent: "space-between",
alignItems: "flex-start",
mt: 2,
pt: 2,
borderTop: "1px solid",
borderColor: "divider"
},
children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
variant: "body2",
sx: {
color: "text.secondary"
},
children: t("payment.autoTopup.rechargeAmount")
}), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
sx: {
alignItems: "flex-end"
},
children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
variant: "h6",
sx: {
fontWeight: 600,
color: "text.primary"
},
children: paymentAmount
}), usdReferenceDisplay && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
sx: {
fontSize: "0.7875rem",
color: "text.lighter"
},
children: usdReferenceDisplay
}), isDynamicPricing && exchangeRateData?.rate && /* @__PURE__ */(0, _jsxRuntime.jsx)(_quoteDetailsPanel.default, {
rateLine: t("payment.checkout.quote.rateLine", {
symbol: currency.symbol,
rate: `$${(0, _util.formatExchangeRate)(exchangeRateData.rate) || exchangeRateData.rate}`
}),
rows: [{
label: t("payment.checkout.quote.detailProvider"),
value: exchangeRateData?.provider_display || exchangeRateData?.provider_name || "\u2014"
}, {
label: t("payment.checkout.quote.detailUpdatedAt"),
value: exchangeRateData?.timestamp_ms ? (0, _util.formatToDatetime)(exchangeRateData.timestamp_ms, locale) : "\u2014"
}, {
label: t("payment.checkout.quote.detailSlippage"),
value: slippageConfig?.mode === "rate" && slippageConfig.min_acceptable_rate ? `$${(0, _util.formatExchangeRate)(slippageConfig.min_acceptable_rate) || slippageConfig.min_acceptable_rate}` : `${slippageConfig?.percent ?? slippagePercent}%`,
isSlippage: true
}],
isSubscription: true,
slippageValue: slippageConfig?.percent ?? slippagePercent,
slippageConfig: slippageConfig || void 0,
onSlippageChange,
exchangeRate: exchangeRateData?.rate,
baseCurrency: "USD",
disabled
})]
})]
})]
});
}