bananas-commerce-admin
Version:
What's this, an admin for apes?
63 lines • 4.04 kB
JavaScript
import React, { useCallback, useState } from "react";
import DeleteOutlineOutlinedIcon from "@mui/icons-material/DeleteOutlineOutlined";
import { TableBody, TableRow } from "@mui/material";
import IconButton from "@mui/material/IconButton";
import Typography from "@mui/material/Typography";
import { DateTime } from "luxon";
import { useSnackbar } from "notistack";
import Table from "../../../components/Table";
import { TableCell } from "../../../components/Table/TableCell";
import TableHeading from "../../../components/Table/TableHeading";
import TableCard from "../../../components/TableCard";
import TableCardHeader from "../../../components/TableCardHeader";
import { useApi } from "../../../contexts/ApiContext";
import { useDialog } from "../../../contexts/DialogContext";
import { useI18n } from "../../../contexts/I18nContext";
import { useUser } from "../../../contexts/UserContext";
import { hasPermission } from "../../../util/has_permission";
import { getHumanReadablePaymentMethod } from "../../pos/utils/getHumanReadablePaymentMethod";
import { paymentMethodMask } from "../utils/paymentMethodMask";
const PaymentMethodsCard = ({ data: { next: _next, previous: _previous, results: initialResults }, params, refresh, }) => {
const results = initialResults.filter((method) => !method.is_revoked);
const openDialog = useDialog();
const api = useApi();
const { t } = useI18n();
const { user } = useUser();
const { enqueueSnackbar } = useSnackbar();
const isEditable = hasPermission(user, "pos.delete_paymenttoken") && results.length > 0;
const [isEditing, setIsEditing] = useState(false);
const { membership_number } = params;
const revoke = useCallback(async (token_id) => {
if (await openDialog(t("Revoke Payment Method"), t("Are you sure you want to revoke this member's payment method?"), {
ok: t("Yes, revoke"),
cancel: t("Cancel"),
})) {
const action = api.operations["pos.contrib:member-paymenttoken-revoke"];
if (!action) {
throw new Error('Invalid action "pos.contrib:member-paymenttoken-revoke".');
}
const response = await action.call({ params: { membership_number, token_id } });
if (response.ok) {
refresh();
setIsEditing(false);
enqueueSnackbar(t("Payment method revoked"), { variant: "success" });
}
else {
console.error("[REVOKE_PAYMENT_METHOD]", response);
enqueueSnackbar(t("Failed to revoke payment method"), { variant: "error" });
}
}
}, [api, results]);
return (React.createElement(TableCard, null,
React.createElement(TableCardHeader, { isEditable: isEditable, title: "Payment Methods", toggled: isEditing, onChange: setIsEditing }),
React.createElement(Table, { count: results.length },
React.createElement(TableBody, { sx: { ".MuiTableRow-root:last-child > .MuiTableCell-root": { borderBottom: "none" } } }, results.length > 0 ? (results.map((method) => (React.createElement(TableRow, { key: method.id },
React.createElement(TableHeading, null, getHumanReadablePaymentMethod(method.method)?.name ?? method.method),
React.createElement(TableCell, null, paymentMethodMask(method)),
React.createElement(TableCell, { align: "right" }, DateTime.fromISO(method.expiry_date).toFormat("MM/yy")),
isEditable && isEditing && (React.createElement(TableCell, { align: "right", padding: "none", sx: { width: 64 } },
React.createElement(IconButton, { onClick: () => revoke(method.id) },
React.createElement(DeleteOutlineOutlinedIcon, { fontSize: "small" })))))))) : (React.createElement(Typography, { color: "text.disabled", fontStyle: "italic", m: "0 1em 1em 1em" }, "No payment methods registered"))))));
};
export default PaymentMethodsCard;
//# sourceMappingURL=PaymentMethodsCard.js.map