@blocklet/payment-react
Version:
Reusable react components for payment kit v2
162 lines (161 loc) • 5.5 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
import { Box, Button, CircularProgress, Stack, Typography } from "@mui/material";
import { useInfiniteScroll } from "ahooks";
import TxLink from "../../components/blockchain/tx.js";
import Status from "../../components/status.js";
import api from "../../libs/api.js";
import { formatBNStr, formatToDate, getPaymentIntentStatusColor } from "../../libs/util.js";
const groupByDate = (items) => {
const grouped = {};
items.forEach((item) => {
const date = new Date(item.created_at).toLocaleDateString();
if (!grouped[date]) {
grouped[date] = [];
}
grouped[date]?.push(item);
});
return grouped;
};
const fetchData = (params = {}) => {
const search = new URLSearchParams();
Object.keys(params).forEach((key) => {
search.set(key, String(params[key]));
});
return api.get(`/api/payment-intents?${search.toString()}`).then((res) => res.data);
};
const pageSize = 10;
export default function CustomerPaymentList({ customer_id }) {
const { t } = useLocaleContext();
const { data, loadMore, loadingMore, loading } = useInfiniteScroll(
(d) => {
const page = d ? Math.ceil(d.list.length / pageSize) + 1 : 1;
return fetchData({ page, pageSize, customer_id });
},
{
reloadDeps: [customer_id]
}
);
if (loading || !data) {
return /* @__PURE__ */ jsx(CircularProgress, {});
}
if (data && data.list.length === 0) {
return /* @__PURE__ */ jsx(
Typography,
{
sx: {
color: "text.secondary"
},
children: t("payment.customer.payment.empty")
}
);
}
const hasMore = data && data.list.length < data.count;
const grouped = groupByDate(data.list);
return /* @__PURE__ */ jsxs(
Stack,
{
direction: "column",
sx: {
gap: 1,
mt: 1
},
children: [
Object.entries(grouped).map(([date, payments]) => /* @__PURE__ */ jsxs(Box, { children: [
/* @__PURE__ */ jsx(Typography, { sx: { fontWeight: "bold", color: "text.secondary", mt: 2, mb: 1 }, children: date }),
payments.map((item) => /* @__PURE__ */ jsxs(
Stack,
{
direction: {
xs: "column",
sm: "row"
},
sx: {
gap: {
xs: 0.5,
sm: 1.5,
md: 3
},
flexWrap: "nowrap",
my: 1
},
children: [
/* @__PURE__ */ jsx(
Box,
{
sx: {
flex: 3
},
children: /* @__PURE__ */ jsx(Typography, { children: formatToDate(item.created_at) })
}
),
/* @__PURE__ */ jsx(
Box,
{
sx: {
flex: 2
},
children: /* @__PURE__ */ jsxs(
Typography,
{
sx: {
textAlign: "right"
},
children: [
formatBNStr(item.amount_received, item.paymentCurrency.decimal),
"\xA0",
item.paymentCurrency.symbol
]
}
)
}
),
/* @__PURE__ */ jsx(
Box,
{
sx: {
flex: 3
},
children: /* @__PURE__ */ jsx(Status, { label: item.status, color: getPaymentIntentStatusColor(item.status) })
}
),
/* @__PURE__ */ jsx(
Box,
{
sx: {
flex: 3
},
children: /* @__PURE__ */ jsx(Typography, { children: item.description || "-" })
}
),
/* @__PURE__ */ jsx(
Box,
{
sx: {
flex: 3,
minWidth: "220px"
},
children: (item.payment_details?.arcblock?.tx_hash || item.payment_details?.ethereum?.tx_hash || item.payment_details?.base?.tx_hash) && /* @__PURE__ */ jsx(TxLink, { details: item.payment_details, method: item.paymentMethod, mode: "customer" })
}
)
]
},
item.id
))
] }, date)),
/* @__PURE__ */ jsxs(Box, { children: [
hasMore && /* @__PURE__ */ jsx(Button, { variant: "text", type: "button", color: "inherit", onClick: loadMore, disabled: loadingMore, children: loadingMore ? t("common.loadingMore", { resource: t("payment.customer.payments") }) : t("common.loadMore", { resource: t("payment.customer.payments") }) }),
!hasMore && data.count > pageSize && /* @__PURE__ */ jsx(
Typography,
{
sx: {
color: "text.secondary"
},
children: t("common.noMore", { resource: t("payment.customer.payments") })
}
)
] })
]
}
);
}