bananas-commerce-admin
Version:
What's this, an admin for apes?
59 lines • 4.67 kB
JavaScript
import React, { useState } from "react";
import CancelIcon from "@mui/icons-material/Cancel";
import CheckIcon from "@mui/icons-material/Check";
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
import PriorityHighOutlinedIcon from "@mui/icons-material/PriorityHighOutlined";
import { Avatar, Collapse, IconButton, Stack, Table, TableBody } from "@mui/material";
import Chip from "@mui/material/Chip";
import TableRow from "@mui/material/TableRow";
import { DateTime } from "luxon";
import { TableCell } from "../../../components/Table/TableCell";
import TableHead from "../../../components/Table/TableHead";
import TableHeading from "../../../components/Table/TableHeading";
import { useI18n } from "../../../contexts/I18nContext";
export const SubscriptionsListItem = ({ period }) => {
const [open, setOpen] = useState(false);
const { t } = useI18n();
return (React.createElement(React.Fragment, null,
React.createElement(TableRow, { sx: {
cursor: "pointer",
"&:hover": {
bgcolor: (theme) => theme.palette.mode === "light" ? theme.palette.grey[200] : theme.palette.grey[700],
},
}, onClick: () => setOpen(!open) },
React.createElement(TableCell, null, DateTime.fromISO(period.from_date).toISODate()),
React.createElement(TableCell, null, DateTime.fromISO(period.due_date).toISODate()),
React.createElement(TableCell, { align: "right" }, period.amount),
React.createElement(TableCell, { align: "right" }, period.purchase_number),
React.createElement(TableCell, { align: "right" }, period.date_confirmed != null ? (React.createElement(Chip, { color: "success", icon: React.createElement(CheckCircleIcon, null), label: t("Paid"), size: "small", sx: { textTransform: "uppercase" } })) : (React.createElement(Chip, { color: "error", icon: React.createElement(CancelIcon, null), label: t("Not paid"), size: "small", sx: { textTransform: "uppercase" } }))),
React.createElement(TableCell, { sx: { width: 34, pl: 0 } },
React.createElement(Stack, { direction: "row", justifyContent: "end" },
React.createElement(IconButton, { size: "small", onClick: () => setOpen(!open) }, open ? React.createElement(KeyboardArrowUpIcon, null) : React.createElement(KeyboardArrowDownIcon, null))))),
React.createElement(TableRow, { sx: { p: 0 } },
React.createElement(TableCell, { colSpan: 6, sx: {
padding: "0 !important",
border: 0,
bgcolor: (theme) => (theme.palette.mode === "light" ? "grey.100" : "grey.800"),
} },
React.createElement(Collapse, { in: open, timeout: "auto" },
React.createElement(Table, null,
React.createElement(TableHead, null,
React.createElement(TableHeading, { width: 150 }, t("Date created")),
React.createElement(TableHeading, null, t("Payment method")),
React.createElement(TableHeading, { align: "right" }, t("Status")),
React.createElement(TableHeading, { width: 58 })),
React.createElement(TableBody, null, period.charges.map((charge) => (React.createElement(TableRow, { key: charge.id },
React.createElement(TableCell, null, DateTime.fromISO(charge.date_created).toISODate()),
React.createElement(TableCell, null, charge.payment_token?.method),
React.createElement(TableCell, { align: "right" },
React.createElement(Stack, { direction: "row", justifyContent: "end" },
charge.reason,
charge.reason === "" ? (React.createElement(Avatar, { sx: { bgcolor: "success.light", width: 18, height: 18, ml: 1 } },
React.createElement(CheckIcon, { sx: { width: 12, height: 12 } }))) : (React.createElement(Avatar, { sx: { bgcolor: "error.light", width: 18, height: 18, ml: 1 } },
React.createElement(PriorityHighOutlinedIcon, { sx: { width: 12, height: 12 } }))))),
React.createElement(TableCell, { width: 58 })))))))))));
};
export default SubscriptionsListItem;
//# sourceMappingURL=SubscriptionsListItem.js.map