bananas-commerce-admin
Version:
What's this, an admin for apes?
66 lines • 4.32 kB
JavaScript
import React from "react";
import LocalOfferOutlinedIcon from "@mui/icons-material/LocalOfferOutlined";
import ReportIcon from "@mui/icons-material/Report";
import WarningIcon from "@mui/icons-material/Warning";
import { Grid2 as Grid, Stack, Typography } from "@mui/material";
import Card from "../../../components/Card";
import CardContent from "../../../components/Card/CardContent";
import CardHeader from "../../../components/Card/CardHeader";
import CardPill from "../../../components/Card/CardPill";
import Content from "../../../containers/Content";
const parseStatus = (value) => {
if (!value) {
return { codes: [] };
}
const trimmed = value.trim();
const match = /^([^[]+)\[([^\]]*)\]>?$/.exec(trimmed);
if (!match) {
return { label: trimmed, codes: [] };
}
const [, label, codes] = match;
return {
label: label.trim(),
codes: codes
.split(",")
.map((code) => code.trim())
.filter(Boolean),
};
};
const formatItem = (label, value) => (React.createElement(Stack, { key: label, direction: "row", justifyContent: "space-between", spacing: 2 },
React.createElement(Typography, { color: "text.secondary", variant: "body2" }, label),
typeof value === "string" || typeof value === "number" ? (React.createElement(Typography, { variant: "body2" }, value)) : (value)));
const ItemCard = ({ item }) => {
const { label: errorLabel, codes: errorCodes } = parseStatus(item.error);
const { label: warningLabel, codes: warningCodes } = parseStatus(item.warning);
return (React.createElement(Card, null,
React.createElement(CardHeader, { title: item.site_code }),
React.createElement(CardContent, null,
React.createElement(Stack, { spacing: 1 },
formatItem("Reference", item.reference),
formatItem("Name", item.name),
formatItem("Variant", item.variant || "—"),
formatItem("Price", item.base_price !== item.price ? (React.createElement(Stack, { alignItems: "center", direction: "row", spacing: 1 },
React.createElement(Typography, { color: "text.disabled", sx: { textDecoration: "line-through" }, variant: "body2" },
item.base_price,
" ",
item.currency),
React.createElement(LocalOfferOutlinedIcon, { color: "error", fontSize: "small" }),
React.createElement(Typography, { color: "error", variant: "body2" },
item.price,
" ",
item.currency))) : (`${item.price} ${item.currency}`)),
React.createElement(Stack, { alignItems: "center", alignSelf: "flex-start", direction: "row", flexWrap: "wrap", gap: 1 },
errorLabel && React.createElement(CardPill, { color: "error", icon: React.createElement(ReportIcon, null), label: errorLabel }),
errorCodes.map((code) => (React.createElement(CardPill, { key: `error-${code}`, color: "error", icon: null, label: code, variant: "outlined" }))),
warningLabel && (React.createElement(CardPill, { color: "warning", icon: React.createElement(WarningIcon, null), label: warningLabel })),
warningCodes.map((code) => (React.createElement(CardPill, { key: `warning-${code}`, color: "warning", icon: null, label: code, variant: "outlined" }))),
React.createElement(CardPill, { color: item.is_available ? "success" : "warning", label: item.is_available ? "Available" : "Unavailable" }))))));
};
const SiteAvailability = ({ data }) => {
const items = data.items ?? [];
return (React.createElement(Content, { layout: "fullWidth" }, items.length > 0 ? (React.createElement(Grid, { container: true, columns: 12, spacing: 2, width: "100%" }, items.map((item) => (React.createElement(Grid, { key: `${item.site_code}-${item.reference}`, size: { xs: 12, md: 4 } },
React.createElement(Stack, { spacing: 2 },
React.createElement(ItemCard, { item: item }))))))) : (React.createElement(Typography, { color: "text.secondary", variant: "body2" }, "No items found"))));
};
export default SiteAvailability;
//# sourceMappingURL=SiteAvailability.js.map