@blocklet/payment-react
Version:
Reusable react components for payment kit v2
416 lines (415 loc) • 13.6 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
module.exports = CreditTransactionsList;
var _jsxRuntime = require("react/jsx-runtime");
var _context = require("@arcblock/ux/lib/Locale/context");
var _material = require("@mui/material");
var _ahooks = require("ahooks");
var _reactRouterDom = require("react-router-dom");
var _react = _interopRequireWildcard(require("react"));
var _system = require("@mui/system");
var _ufo = require("ufo");
var _dateRangePicker = _interopRequireDefault(require("../../components/date-range-picker"));
var _util = require("../../libs/util");
var _payment = require("../../contexts/payment");
var _api = _interopRequireDefault(require("../../libs/api"));
var _table = _interopRequireDefault(require("../../components/table"));
var _navigation = require("../../libs/navigation");
var _sourceDataViewer = _interopRequireDefault(require("../../components/source-data-viewer"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const fetchData = (params = {}) => {
const search = new URLSearchParams();
Object.keys(params).forEach(key => {
if (params[key]) {
search.set(key, String(params[key]));
}
});
return _api.default.get(`/api/credit-transactions?${search.toString()}`).then(res => res.data);
};
const getGrantDetailLink = (grantId, inDashboard) => {
let path = `/customer/credit-grant/${grantId}`;
if (inDashboard) {
path = `/admin/customers/${grantId}`;
}
return {
link: (0, _navigation.createLink)(path),
connect: false
};
};
const getInvoiceDetailLink = (invoiceId, inDashboard) => {
let path = `/customer/invoice/${invoiceId}`;
if (inDashboard) {
path = `/admin/billing/${invoiceId}`;
}
return {
link: (0, _navigation.createLink)(path),
connect: false
};
};
const TransactionsTable = _react.default.memo(props => {
const {
pageSize,
customer_id,
subscription_id,
credit_grant_id,
onTableDataChange,
showAdminColumns = false,
showTimeFilter = false,
includeGrants = false,
source,
mode = "portal"
} = props;
const listKey = "credit-transactions-table";
const {
t,
locale
} = (0, _context.useLocaleContext)();
const {
session
} = (0, _payment.usePaymentContext)();
const isAdmin = ["owner", "admin"].includes(session?.user?.role || "");
const navigate = (0, _reactRouterDom.useNavigate)();
const effectiveCustomerId = customer_id || session?.user?.did;
const [search, setSearch] = (0, _react.useState)({
pageSize: pageSize || 10,
page: 1
});
const [filters, setFilters] = (0, _react.useState)({
start: void 0,
end: void 0
});
const [sourceDataPopover, setSourceDataPopover] = (0, _react.useState)({
anchorEl: null,
data: null
});
const handleDateRangeChange = (0, _react.useCallback)(newValue => {
setFilters(newValue);
setSearch(prev => ({
...prev,
page: 1,
start: newValue.start || void 0,
end: newValue.end || void 0
}));
}, []);
const {
loading,
data = {
list: [],
count: 0
}
} = (0, _ahooks.useRequest)(() => fetchData({
...search,
customer_id: effectiveCustomerId,
subscription_id,
credit_grant_id,
source,
include_grants: includeGrants
}), {
refreshDeps: [search, effectiveCustomerId, subscription_id, credit_grant_id, source, includeGrants]
});
(0, _react.useEffect)(() => {
if (showTimeFilter && !search.start && !search.end) {
handleDateRangeChange(filters);
}
}, [showTimeFilter, handleDateRangeChange, search.start, search.end, filters]);
const prevData = (0, _react.useRef)(data);
(0, _react.useEffect)(() => {
if (onTableDataChange) {
onTableDataChange(data, prevData.current);
prevData.current = data;
}
}, [data]);
const columns = [{
label: t("common.amount"),
name: "credit_amount",
align: "right",
options: {
customBodyRenderLite: (_, index) => {
const item = data?.list[index];
const isGrant = item.activity_type === "grant";
const amount = isGrant ? item.amount : item.credit_amount;
const currency = item.paymentCurrency || item.currency;
const unit = !isGrant && item.meter?.unit ? item.meter.unit : currency?.symbol;
const displayAmount = (0, _util.formatBNStr)(amount, currency?.decimal || 0);
if (!includeGrants) {
return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
children: [displayAmount, " ", unit]
});
}
return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
sx: {
color: isGrant ? "success.main" : "error.main"
},
children: [isGrant ? "+" : "-", " ", displayAmount, " ", unit]
});
}
}
}, {
label: t("common.creditGrant"),
name: "credit_grant",
options: {
customBodyRenderLite: (_, index) => {
const item = data?.list[index];
const isGrant = item.activity_type === "grant";
const grantName = isGrant ? item.name : item.creditGrant.name;
const grantId = isGrant ? item.id : item.credit_grant_id;
return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
direction: "row",
spacing: 1,
onClick: e => {
const link = getGrantDetailLink(grantId, isAdmin && mode === "dashboard");
(0, _navigation.handleNavigation)(e, link.link, navigate);
},
sx: {
alignItems: "center"
},
children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
variant: "body2",
sx: {
cursor: "pointer"
},
children: grantName || `Grant ${grantId.slice(-6)}`
})
});
}
}
}, {
label: t("common.description"),
name: "description",
options: {
customBodyRenderLite: (_, index) => {
const item = data?.list[index];
const isGrant = item.activity_type === "grant";
const description = isGrant ? item.name || item.description || "Credit Granted" : item.subscription?.description || item.description || `${item.meter_event_name} usage`;
return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
variant: "body2",
sx: {
fontWeight: 400
},
children: description
});
}
}
}, ...(showAdminColumns && isAdmin ? [{
label: t("common.meterEvent"),
name: "meter_event",
options: {
customBodyRenderLite: (_, index) => {
const transaction = data?.list[index];
if (!transaction.meter) {
return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
variant: "body2",
children: "-"
});
}
return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Link, {
href: (0, _ufo.joinURL)((0, _util.getPrefix)(), `/admin/billing/${transaction.meter.id}`),
children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
variant: "body2",
sx: {
color: "text.link"
},
children: transaction.meter.event_name
})
});
}
}
}] : []), {
label: t("common.date"),
name: "created_at",
options: {
customBodyRenderLite: (_, index) => {
const item = data?.list[index];
return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
variant: "body2",
sx: {
color: "text.secondary",
fontSize: "0.875rem"
},
children: (0, _util.formatToDate)(item.created_at, locale, "YYYY-MM-DD HH:mm")
});
}
}
}, {
label: t("common.actions"),
name: "actions",
options: {
customBodyRenderLite: (_, index) => {
const item = data?.list[index];
const isGrant = item.activity_type === "grant";
const invoiceId = isGrant ? item.metadata?.invoice_id : null;
const sourceData = !isGrant && item.meterEvent?.source_data;
return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
sx: {
display: "flex",
gap: 1,
alignItems: "center"
},
children: [isGrant && invoiceId && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
variant: "text",
size: "small",
color: "primary",
onClick: e => {
e.preventDefault();
const link = getInvoiceDetailLink(invoiceId, isAdmin && mode === "dashboard");
(0, _navigation.handleNavigation)(e, link.link, navigate);
},
children: t("common.viewInvoice")
}), sourceData && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
variant: "text",
size: "small",
color: "primary",
onClick: e => {
e.preventDefault();
setSourceDataPopover({
anchorEl: e.currentTarget,
data: sourceData
});
},
children: t("common.viewSourceData")
})]
});
}
}
}].filter(Boolean);
const onTableChange = ({
page,
rowsPerPage
}) => {
if (search.pageSize !== rowsPerPage) {
setSearch(x => ({
...x,
pageSize: rowsPerPage,
page: 1
}));
} else if (search.page !== page + 1) {
setSearch(x => ({
...x,
page: page + 1
}));
}
};
return /* @__PURE__ */(0, _jsxRuntime.jsxs)(TableRoot, {
children: [showTimeFilter && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
sx: {
my: 2
},
children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
sx: {
mt: 2
},
children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Grid, {
container: true,
spacing: 2,
sx: {
alignItems: "center"
},
children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Grid, {
size: {
xs: 12,
sm: 6,
md: 4
},
children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_dateRangePicker.default, {
value: filters,
onChange: handleDateRangeChange,
size: "small",
fullWidth: true
})
})
})
})
}), /* @__PURE__ */(0, _jsxRuntime.jsx)(_table.default, {
hasRowLink: true,
durable: `__${listKey}__`,
durableKeys: ["page", "rowsPerPage"],
data: data.list,
columns,
options: {
count: data.count,
page: search.page - 1,
rowsPerPage: search.pageSize
},
loading,
onChange: onTableChange,
toolbar: false,
sx: {
mt: 2
},
showMobile: false,
mobileTDFlexDirection: "row",
emptyNodeText: t("admin.creditTransactions.noTransactions")
}), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Popover, {
open: Boolean(sourceDataPopover.anchorEl),
anchorEl: sourceDataPopover.anchorEl,
onClose: () => setSourceDataPopover({
anchorEl: null,
data: null
}),
anchorOrigin: {
vertical: "bottom",
horizontal: "left"
},
transformOrigin: {
vertical: "top",
horizontal: "left"
},
slotProps: {
paper: {
sx: {
minWidth: {
xs: 0,
md: 320
},
maxHeight: 450,
p: {
xs: 1,
md: 3
}
}
}
},
children: sourceDataPopover.data && /* @__PURE__ */(0, _jsxRuntime.jsx)(_sourceDataViewer.default, {
data: sourceDataPopover.data,
showGroups: true
})
})]
});
});
const TableRoot = (0, _system.styled)(_material.Box)`
@media (max-width: ${({
theme
}) => theme.breakpoints.values.md}px) {
.MuiTable-root > .MuiTableBody-root > .MuiTableRow-root > td.MuiTableCell-root {
> div {
width: fit-content;
flex: inherit;
font-size: 14px;
}
}
.invoice-summary {
padding-right: 20px;
}
}
`;
function CreditTransactionsList(rawProps) {
const props = Object.assign({
customer_id: "",
subscription_id: "",
credit_grant_id: "",
source: "",
pageSize: 10,
onTableDataChange: () => {},
showAdminColumns: false,
showTimeFilter: false,
includeGrants: false,
mode: "portal"
}, rawProps);
return /* @__PURE__ */(0, _jsxRuntime.jsx)(TransactionsTable, {
...props
});
}