@blocklet/payment-react
Version:
Reusable react components for payment kit v2
174 lines (173 loc) • 4.9 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { Stack, Typography, TextField, Card } from "@mui/material";
import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
import { useState } from "react";
import ProductCard from "../../payment/product-card.js";
import { formatPrice, formatNumber } from "../../libs/util.js";
export default function AutoTopupProductCard({
product,
price,
currency,
quantity,
onQuantityChange,
maxQuantity = 99,
minQuantity = 1,
creditCurrency
}) {
const { t } = useLocaleContext();
const [localQuantity, setLocalQuantity] = useState(quantity);
const localQuantityNum = Number(localQuantity) || 0;
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__ */ jsxs(Card, { variant: "outlined", sx: { p: 2 }, children: [
/* @__PURE__ */ jsxs(
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__ */ jsx(
Stack,
{
direction: "row",
spacing: 2,
sx: {
alignItems: "center",
flex: 1
},
children: /* @__PURE__ */ jsx(
ProductCard,
{
name: product?.name || "",
description: t("payment.autoTopup.creditsIncluded", {
name: creditCurrency?.name,
num: formatNumber(creditUnitAmount * localQuantityNum)
}),
logo: product?.images?.[0],
size: 40
}
)
}
),
/* @__PURE__ */ jsxs(
Stack,
{
direction: "row",
spacing: 1,
sx: {
alignItems: "center",
alignSelf: {
xs: "flex-end",
sm: "center"
}
},
children: [
/* @__PURE__ */ jsxs(
Typography,
{
variant: "body2",
sx: {
color: "text.secondary",
minWidth: "fit-content"
},
children: [
t("common.quantity"),
":"
]
}
),
/* @__PURE__ */ jsx(
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__ */ jsxs(
Stack,
{
direction: "row",
sx: {
justifyContent: "space-between",
alignItems: "center",
mt: 2,
pt: 2,
borderTop: "1px solid",
borderColor: "divider"
},
children: [
/* @__PURE__ */ jsx(
Typography,
{
variant: "body2",
sx: {
color: "text.secondary"
},
children: t("payment.autoTopup.rechargeAmount")
}
),
/* @__PURE__ */ jsx(
Typography,
{
variant: "h6",
sx: {
fontWeight: 600,
color: "text.primary"
},
children: formatPrice(price, currency, product?.unit_label, localQuantity, true)
}
)
]
}
)
] });
}