@blocklet/payment-react
Version:
Reusable react components for payment kit v2
300 lines (299 loc) • 9.78 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 _ufo = require("ufo");
var _system = require("@mui/system");
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");
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 TransactionsTable = _react.default.memo(props => {
const {
pageSize,
customer_id,
subscription_id,
credit_grant_id,
onTableDataChange,
showAdminColumns = false,
showTimeFilter = 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 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
}), {
refreshDeps: [search, effectiveCustomerId, subscription_id, credit_grant_id, source]
});
(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 transaction = data?.list[index];
const unit = transaction.meter?.unit || transaction.paymentCurrency.symbol;
return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
children: [(0, _util.formatBNStr)(transaction.credit_amount, transaction.paymentCurrency.decimal), " ", unit]
});
}
}
}, !credit_grant_id && {
label: t("common.creditGrant"),
name: "credit_grant",
options: {
customBodyRenderLite: (_, index) => {
const transaction = data?.list[index];
return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
direction: "row",
spacing: 1,
onClick: e => {
const link = getGrantDetailLink(transaction.credit_grant_id, isAdmin && mode === "dashboard");
(0, _navigation.handleNavigation)(e, link.link, navigate);
},
sx: {
alignItems: "center"
},
children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
variant: "body2",
sx: {
color: "text.link",
cursor: "pointer"
},
children: transaction.creditGrant.name || `Grant ${transaction.credit_grant_id.slice(-6)}`
})
});
}
}
}, {
label: t("common.description"),
name: "subscription",
options: {
customBodyRenderLite: (_, index) => {
const transaction = data?.list[index];
return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
variant: "body2",
children: transaction.subscription?.description || transaction.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 transaction = data?.list[index];
return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
variant: "body2",
children: (0, _util.formatToDate)(transaction.created_at, locale, "YYYY-MM-DD HH:mm:ss")
});
}
}
}].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")
})]
});
});
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,
mode: "portal"
}, rawProps);
return /* @__PURE__ */(0, _jsxRuntime.jsx)(TransactionsTable, {
...props
});
}