@blocklet/payment-react
Version:
Reusable react components for payment kit v2
277 lines (276 loc) • 8.81 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.StatusChip = StatusChip;
module.exports = CreditGrantsList;
var _jsxRuntime = require("react/jsx-runtime");
var _context = require("@arcblock/ux/lib/Locale/context");
var _material = require("@mui/material");
var _ahooks = require("ahooks");
var _react = _interopRequireWildcard(require("react"));
var _reactRouterDom = require("react-router-dom");
var _system = require("@mui/system");
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-grants?${search.toString()}`).then(res => res.data);
};
function StatusChip({
status,
label
}) {
const getStatusColor = statusValue => {
switch (statusValue) {
case "granted":
return "success";
case "pending":
return "warning";
case "expired":
return "default";
case "depleted":
return "default";
case "voided":
return "default";
default:
return "default";
}
};
return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Chip, {
label: label || status,
size: "small",
color: getStatusColor(status)
});
}
const getLink = (grant, inDashboard) => {
let path = `/customer/credit-grant/${grant.id}`;
if (inDashboard) {
path = `/admin/customers/${grant.id}`;
}
return {
link: (0, _navigation.createLink)(path),
connect: false
};
};
const GrantsTable = _react.default.memo(props => {
const {
pageSize,
status = "",
customer_id,
subscription_id,
onTableDataChange
} = props;
const listKey = "credit-grants-table";
const {
t,
locale
} = (0, _context.useLocaleContext)();
const {
session
} = (0, _payment.usePaymentContext)();
const navigate = (0, _reactRouterDom.useNavigate)();
const isAdmin = ["owner", "admin"].includes(session?.user?.role || "");
const inDashboard = props.mode === "dashboard" && isAdmin;
const effectiveCustomerId = customer_id || session?.user?.did;
const [search, setSearch] = (0, _react.useState)({
pageSize: pageSize || 10,
page: 1
});
const {
loading,
data = {
list: [],
count: 0
}
} = (0, _ahooks.useRequest)(() => fetchData({
...search,
status,
customer_id: effectiveCustomerId,
subscription_id
}), {
refreshDeps: [search, status, effectiveCustomerId, subscription_id]
});
const prevData = (0, _react.useRef)(data);
const handleLinkClick = (e, grant) => {
const {
link
} = getLink(grant, inDashboard);
(0, _navigation.handleNavigation)(e, link, navigate, {
target: link.external ? "_blank" : "_self"
});
};
(0, _react.useEffect)(() => {
if (onTableDataChange) {
onTableDataChange(data, prevData.current);
prevData.current = data;
}
}, [data]);
const columns = [{
label: t("common.name"),
name: "name",
options: {
customBodyRenderLite: (_, index) => {
const grant = data?.list[index];
return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
onClick: e => handleLinkClick(e, grant),
children: grant.name || grant.id
});
}
}
}, {
label: t("common.status"),
name: "status",
options: {
customBodyRenderLite: (_, index) => {
const grant = data?.list[index];
return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
onClick: e => handleLinkClick(e, grant),
children: /* @__PURE__ */(0, _jsxRuntime.jsx)(StatusChip, {
status: grant.status,
label: t(`admin.customer.creditGrants.status.${grant.status}`)
})
});
}
}
}, {
label: t("common.remainingCredit"),
name: "remaining_amount",
align: "right",
options: {
customBodyRenderLite: (_, index) => {
const grant = data?.list[index];
return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
onClick: e => handleLinkClick(e, grant),
children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
variant: "body2",
children: [(0, _util.formatBNStr)(grant.remaining_amount, grant.paymentCurrency.decimal), " ", grant.paymentCurrency.symbol]
})
});
}
}
}, {
label: t("common.scope"),
name: "scope",
options: {
customBodyRenderLite: (_, index) => {
const grant = data?.list[index];
let scope = "general";
if (grant.applicability_config?.scope?.prices) {
scope = "specific";
}
return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
onClick: e => handleLinkClick(e, grant),
children: scope === "specific" ? t("common.specific") : t("common.general")
});
}
}
}, {
label: t("common.effectiveDate"),
name: "effective_at",
options: {
customBodyRenderLite: (_, index) => {
const grant = data?.list[index];
const effectiveAt = grant.effective_at ? grant.effective_at * 1e3 : grant.created_at;
return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
onClick: e => handleLinkClick(e, grant),
children: (0, _util.formatToDate)(effectiveAt, locale, "YYYY-MM-DD HH:mm")
});
}
}
}, {
label: t("common.expirationDate"),
name: "expires_at",
options: {
customBodyRenderLite: (_, index) => {
const grant = data?.list[index];
return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
onClick: e => handleLinkClick(e, grant),
children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
variant: "body2",
children: grant.expires_at ? (0, _util.formatToDate)(grant.expires_at * 1e3, locale, "YYYY-MM-DD HH:mm") : "-"
})
});
}
}
}];
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.jsx)(TableRoot, {
children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_table.default, {
hasRowLink: true,
durable: `__${listKey}__`,
durableKeys: ["page", "rowsPerPage", "searchText"],
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.creditGrants.noGrants")
})
});
});
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 CreditGrantsList(rawProps) {
const props = Object.assign({
customer_id: "",
subscription_id: "",
status: "granted,pending,depleted,expired",
pageSize: 10,
onTableDataChange: () => {}
}, rawProps);
return /* @__PURE__ */(0, _jsxRuntime.jsx)(GrantsTable, {
...props
});
}