bananas-commerce-admin 0.20.2 → 0.20.3

package/dist/esm/extensions/pim/contrib/ArticleProduct.js

@@ -0,0 +1,98 @@
+import React from "react";
+import { TableBody, TableHead, TableRow } from "@mui/material";
+import Box from "@mui/material/Box";
+import ImageList from "@mui/material/ImageList";
+import ImageListItem from "@mui/material/ImageListItem";
+import ImageListItemBar from "@mui/material/ImageListItemBar";
+import Modal from "@mui/material/Modal";
+import Card from "../../../components/Card";
+import CardContent from "../../../components/Card/CardContent";
+import CardFieldText from "../../../components/Card/CardFieldText";
+import CardHeader from "../../../components/Card/CardHeader";
+import CardRow from "../../../components/Card/CardRow";
+import Table from "../../../components/Table";
+import { TableCell } from "../../../components/Table/TableCell";
+import TableHeading from "../../../components/Table/TableHeading";
+import { useI18n } from "../../../contexts/I18nContext";
+import { capitalize } from "../../../util";
+const ArticleProductCard = ({ data, params }) => {
+    const { t } = useI18n();
+    const [selectedAsset, setSelectedAsset] = React.useState(null);
+    const { code: articleCode } = params;
+    const { product, assets } = data;
+    const articleAssets = assets.filter((asset) => asset.article_code == articleCode || asset.article_code == "");
+    const imageAssets = articleAssets.filter((asset) => asset.asset_type == "image");
+    const otherAssets = articleAssets.filter((asset) => asset.asset_type !== "image");
+    const productProperties = Object.entries(product.properties);
+    return (React.createElement(Card, { columns: 1, isEditable: false },
+        React.createElement(CardHeader, { title: "Product" }),
+        React.createElement(CardContent, null,
+            React.createElement(CardRow, null,
+                React.createElement(CardFieldText, { formName: "name", label: t("Name"), required: true, value: product.name })),
+            React.createElement(CardRow, null,
+                React.createElement(CardFieldText, { formName: "description", label: t("Description"), required: true, value: product.description }))),
+        productProperties.length > 0 && (React.createElement(React.Fragment, null,
+            React.createElement(CardHeader, { title: t("Properties") }),
+            React.createElement(Table, { count: productProperties.length },
+                React.createElement(TableBody, { sx: {
+                        "& .MuiTableRow-root:first-of-type .MuiTableCell-root": (theme) => ({
+                            borderTop: `1px solid ${theme.palette.divider}`,
+                        }),
+                    } }, productProperties
+                    .sort((a, b) => (a[0] < b[0] ? -1 : 1))
+                    .map((prop) => (React.createElement(TableRow, { key: prop[0] },
+                    React.createElement(TableCell, null, capitalize(prop[0])),
+                    React.createElement(TableCell, { typographyProps: {
+                            variant: "caption",
+                            color: "text.secondary",
+                        } }, prop[1])))))))),
+        articleAssets.length > 0 && React.createElement(CardHeader, { title: t("Assets") }),
+        imageAssets.length > 0 && (React.createElement(React.Fragment, null,
+            React.createElement(Modal, { "aria-describedby": "modal-modal-description", "aria-labelledby": "modal-modal-title", open: selectedAsset !== null, onClose: () => setSelectedAsset(null) },
+                React.createElement(Box, { sx: {
+                        position: "absolute",
+                        top: "50%",
+                        left: "50%",
+                        transform: "translate(-50%, -50%)",
+                        width: "100vw", // Set explicit width
+                        height: "100vh", // Set explicit height
+                        bgcolor: "rgba(0, 0, 0, 0.7)", // Dark overlay background
+                        boxShadow: 24,
+                        p: 2, // Reduced padding
+                        display: "flex",
+                        justifyContent: "center",
+                        alignItems: "center",
+                        overflow: "hidden", // Hide any overflowing content
+                        outline: "none",
+                    }, onClick: () => setSelectedAsset(null) }, selectedAsset !== null && (React.createElement("img", { alt: selectedAsset.caption, loading: "lazy", src: selectedAsset.url, style: {
+                        maxWidth: "100%",
+                        maxHeight: "100%",
+                        objectFit: "contain",
+                        borderRadius: "8px", // Subtle rounded corners for the image
+                    } })))),
+            React.createElement(CardContent, { sx: {
+                    width: "100%",
+                    height: 400,
+                    overflowY: "scroll",
+                    paddingTop: 0,
+                    paddingBottom: 0,
+                    paddingLeft: 3,
+                    paddingRight: 3,
+                } },
+                React.createElement(ImageList, { cols: 3, gap: 8, variant: "masonry" }, imageAssets.map((asset) => (React.createElement(ImageListItem, { key: asset.id, onClick: () => setSelectedAsset(asset) },
+                    React.createElement("img", { alt: asset.caption, loading: "lazy", src: asset.url }),
+                    React.createElement(ImageListItemBar, { subtitle: asset.caption })))))))),
+        otherAssets.length > 0 && (React.createElement(Table, { count: otherAssets.length },
+            React.createElement(TableHead, null,
+                React.createElement(TableRow, null,
+                    React.createElement(TableHeading, null, t("Asset ID")),
+                    React.createElement(TableHeading, { align: "right" }, t("Type")),
+                    React.createElement(TableHeading, { align: "right" }, t("Caption")))),
+            React.createElement(TableBody, { sx: { ".MuiTableRow-root:last-child > .MuiTableCell-root": { borderBottom: "none" } } }, otherAssets.map((asset) => (React.createElement(TableRow, { key: asset.id, sx: { height: 56 } },
+                React.createElement(TableCell, { sx: { py: 0 } },
+                    React.createElement("a", { href: asset.url, rel: "noreferrer", target: "_blank" }, asset.id)),
+                React.createElement(TableCell, { align: "right", sx: { py: 0 } }, asset.asset_type),
+                React.createElement(TableCell, { align: "right", sx: { py: 0 } }, asset.caption)))))))));
+};
+export default ArticleProductCard;
+//# sourceMappingURL=ArticleProduct.js.map

package/dist/esm/extensions/pim/contrib/ArticleProduct.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleProduct.js","sourceRoot":"","sources":["../../../../../src/extensions/pim/contrib/ArticleProduct.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC/D,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,SAAS,MAAM,yBAAyB,CAAC;AAChD,OAAO,aAAa,MAAM,6BAA6B,CAAC;AACxD,OAAO,gBAAgB,MAAM,gCAAgC,CAAC;AAC9D,OAAO,KAAK,MAAM,qBAAqB,CAAC;AAExC,OAAO,IAAI,MAAM,0BAA0B,CAAC;AAC5C,OAAO,WAAW,MAAM,sCAAsC,CAAC;AAC/D,OAAO,aAAa,MAAM,wCAAwC,CAAC;AACnE,OAAO,UAAU,MAAM,qCAAqC,CAAC;AAC7D,OAAO,OAAO,MAAM,kCAAkC,CAAC;AACvD,OAAO,KAAK,MAAM,2BAA2B,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAChE,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAG3C,MAAM,kBAAkB,GAA6C,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE;IACxF,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE,CAAC;IACxB,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAsB,IAAI,CAAC,CAAC;IAEpF,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,MAA0B,CAAC;IACzD,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IAEjC,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CACjC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,YAAY,IAAI,WAAW,IAAI,KAAK,CAAC,YAAY,IAAI,EAAE,CACzE,CAAC;IACF,MAAM,WAAW,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,IAAI,OAAO,CAAC,CAAC;IACjF,MAAM,WAAW,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,KAAK,OAAO,CAAC,CAAC;IAElF,MAAM,iBAAiB,GAAG,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IAE7D,OAAO,CACL,oBAAC,IAAI,IAAC,OAAO,EAAE,CAAC,EAAE,UAAU,EAAE,KAAK;QACjC,oBAAC,UAAU,IAAC,KAAK,EAAC,SAAS,GAAG;QAE9B,oBAAC,WAAW;YACV,oBAAC,OAAO;gBACN,oBAAC,aAAa,IAAC,QAAQ,EAAC,MAAM,EAAC,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,CAAC,IAAI,GAAI,CAChF;YACV,oBAAC,OAAO;gBACN,oBAAC,aAAa,IACZ,QAAQ,EAAC,aAAa,EACtB,KAAK,EAAE,CAAC,CAAC,aAAa,CAAC,EACvB,QAAQ,EAAE,IAAI,EACd,KAAK,EAAE,OAAO,CAAC,WAAW,GAC1B,CACM,CACE;QAEb,iBAAiB,CAAC,MAAM,GAAG,CAAC,IAAI,CAC/B;YACE,oBAAC,UAAU,IAAC,KAAK,EAAE,CAAC,CAAC,YAAY,CAAC,GAAI;YAEtC,oBAAC,KAAK,IAAC,KAAK,EAAE,iBAAiB,CAAC,MAAM;gBACpC,oBAAC,SAAS,IACR,EAAE,EAAE;wBACF,sDAAsD,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;4BAClE,SAAS,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,OAAO,EAAE;yBAChD,CAAC;qBACH,IAEA,iBAAiB;qBACf,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;qBACtC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACb,oBAAC,QAAQ,IAAC,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC;oBACpB,oBAAC,SAAS,QAAE,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAa;oBAC5C,oBAAC,SAAS,IACR,eAAe,EAAE;4BACf,OAAO,EAAE,SAAS;4BAClB,KAAK,EAAE,gBAAgB;yBACxB,IAEA,IAAI,CAAC,CAAC,CAAC,CACE,CACH,CACZ,CAAC,CACM,CACN,CACP,CACJ;QAEA,aAAa,CAAC,MAAM,GAAG,CAAC,IAAI,oBAAC,UAAU,IAAC,KAAK,EAAE,CAAC,CAAC,QAAQ,CAAC,GAAI;QAE9D,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,CACzB;YACE,oBAAC,KAAK,wBACa,yBAAyB,qBAC1B,mBAAmB,EACnC,IAAI,EAAE,aAAa,KAAK,IAAI,EAC5B,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC;gBAErC,oBAAC,GAAG,IACF,EAAE,EAAE;wBACF,QAAQ,EAAE,UAAU;wBACpB,GAAG,EAAE,KAAK;wBACV,IAAI,EAAE,KAAK;wBACX,SAAS,EAAE,uBAAuB;wBAClC,KAAK,EAAE,OAAO,EAAE,qBAAqB;wBACrC,MAAM,EAAE,OAAO,EAAE,sBAAsB;wBACvC,OAAO,EAAE,oBAAoB,EAAE,0BAA0B;wBACzD,SAAS,EAAE,EAAE;wBACb,CAAC,EAAE,CAAC,EAAE,kBAAkB;wBACxB,OAAO,EAAE,MAAM;wBACf,cAAc,EAAE,QAAQ;wBACxB,UAAU,EAAE,QAAQ;wBACpB,QAAQ,EAAE,QAAQ,EAAE,+BAA+B;wBACnD,OAAO,EAAE,MAAM;qBAChB,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAEpC,aAAa,KAAK,IAAI,IAAI,CACzB,6BACE,GAAG,EAAE,aAAa,CAAC,OAAO,EAC1B,OAAO,EAAC,MAAM,EACd,GAAG,EAAE,aAAa,CAAC,GAAG,EACtB,KAAK,EAAE;wBACL,QAAQ,EAAE,MAAM;wBAChB,SAAS,EAAE,MAAM;wBACjB,SAAS,EAAE,SAAS;wBACpB,YAAY,EAAE,KAAK,EAAE,uCAAuC;qBAC7D,GACD,CACH,CACG,CACA;YAER,oBAAC,WAAW,IACV,EAAE,EAAE;oBACF,KAAK,EAAE,MAAM;oBACb,MAAM,EAAE,GAAG;oBACX,SAAS,EAAE,QAAQ;oBACnB,UAAU,EAAE,CAAC;oBACb,aAAa,EAAE,CAAC;oBAChB,WAAW,EAAE,CAAC;oBACd,YAAY,EAAE,CAAC;iBAChB;gBAED,oBAAC,SAAS,IAAC,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,OAAO,EAAC,SAAS,IAC1C,WAAW,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAC1B,oBAAC,aAAa,IAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,gBAAgB,CAAC,KAAK,CAAC;oBAClE,6BAAK,GAAG,EAAE,KAAK,CAAC,OAAO,EAAE,OAAO,EAAC,MAAM,EAAC,GAAG,EAAE,KAAK,CAAC,GAAG,GAAI;oBAC1D,oBAAC,gBAAgB,IAAC,QAAQ,EAAE,KAAK,CAAC,OAAO,GAAI,CAC/B,CACjB,CAAC,CACQ,CACA,CACb,CACJ;QAEA,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,CACzB,oBAAC,KAAK,IAAC,KAAK,EAAE,WAAW,CAAC,MAAM;YAC9B,oBAAC,SAAS;gBACR,oBAAC,QAAQ;oBACP,oBAAC,YAAY,QAAE,CAAC,CAAC,UAAU,CAAC,CAAgB;oBAC5C,oBAAC,YAAY,IAAC,KAAK,EAAC,OAAO,IAAE,CAAC,CAAC,MAAM,CAAC,CAAgB;oBACtD,oBAAC,YAAY,IAAC,KAAK,EAAC,OAAO,IAAE,CAAC,CAAC,SAAS,CAAC,CAAgB,CAChD,CACD;YAEZ,oBAAC,SAAS,IACR,EAAE,EAAE,EAAE,mDAAmD,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,EAAE,IAEpF,WAAW,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAC1B,oBAAC,QAAQ,IAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE;gBACzC,oBAAC,SAAS,IAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE;oBACtB,2BAAG,IAAI,EAAE,KAAK,CAAC,GAAG,EAAE,GAAG,EAAC,YAAY,EAAC,MAAM,EAAC,QAAQ,IACjD,KAAK,CAAC,EAAE,CACP,CACM;gBACZ,oBAAC,SAAS,IAAC,KAAK,EAAC,OAAO,EAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,IACnC,KAAK,CAAC,UAAU,CACP;gBACZ,oBAAC,SAAS,IAAC,KAAK,EAAC,OAAO,EAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,IACnC,KAAK,CAAC,OAAO,CACJ,CACH,CACZ,CAAC,CACQ,CACN,CACT,CACI,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/esm/extensions/pim/index.js

@@ -0,0 +1,13 @@
+import InventoryOutlinedIcon from "@mui/icons-material/InventoryOutlined";
+export const contrib = {
+    catalog: {
+        "catalog:article:detail:product": {
+            title: "Product",
+            icon: InventoryOutlinedIcon,
+            component: async () => (await import("./contrib/ArticleProduct")).default,
+            predicate: (article) => !!article.product_number,
+            variant: "inline",
+        },
+    },
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/extensions/pim/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/extensions/pim/index.tsx"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,MAAM,uCAAuC,CAAC;AAK1E,MAAM,CAAC,MAAM,OAAO,GAAwC;IAC1D,OAAO,EAAE;QACP,gCAAgC,EAAE;YAChC,KAAK,EAAE,SAAS;YAChB,IAAI,EAAE,qBAAqB;YAC3B,SAAS,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC,MAAM,MAAM,CAAC,0BAA0B,CAAC,CAAC,CAAC,OAAO;YACzE,SAAS,EAAE,CAAC,OAAsB,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,cAAc;YAC/D,OAAO,EAAE,QAAQ;SAClB;KACF;CACO,CAAC"}

package/dist/esm/extensions/pim/types/contrib.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=contrib.js.map

package/dist/esm/extensions/pim/types/contrib.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"contrib.js","sourceRoot":"","sources":["../../../../../src/extensions/pim/types/contrib.ts"],"names":[],"mappings":""}

package/dist/esm/index.js

@@ -65,6 +65,7 @@ export * as catalog from "./extensions/catalog";
 export * as fulfillment from "./extensions/fulfillment";
 export * as inventory from "./extensions/inventory";
 export * as member from "./extensions/member";
+export * as pim from "./extensions/pim";
 export * as pos from "./extensions/pos";
 export * as pricing from "./extensions/pricing";
 export * as report from "./extensions/report";

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,OAAO,CAAC;AACtB,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,oCAAoC,CAAC;AACnD,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yCAAyC,CAAC;AACxD,cAAc,qCAAqC,CAAC;AACpD,cAAc,iCAAiC,CAAC;AAChD,cAAc,kCAAkC,CAAC;AACjD,cAAc,mCAAmC,CAAC;AAClD,cAAc,mCAAmC,CAAC;AAClD,cAAc,mCAAmC,CAAC;AAClD,cAAc,iCAAiC,CAAC;AAChD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kCAAkC,CAAC;AACjD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iCAAiC,CAAC;AAChD,cAAc,oCAAoC,CAAC;AACnD,cAAc,oCAAoC,CAAC;AACnD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,yCAAyC,CAAC;AACxD,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mCAAmC,CAAC;AAClD,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,OAAO,KAAK,OAAO,MAAM,sBAAsB,CAAC;AAChD,OAAO,KAAK,OAAO,MAAM,sBAAsB,CAAC;AAChD,OAAO,KAAK,WAAW,MAAM,0BAA0B,CAAC;AACxD,OAAO,KAAK,SAAS,MAAM,wBAAwB,CAAC;AACpD,OAAO,KAAK,MAAM,MAAM,qBAAqB,CAAC;AAC9C,OAAO,KAAK,GAAG,MAAM,kBAAkB,CAAC;AACxC,OAAO,KAAK,OAAO,MAAM,sBAAsB,CAAC;AAChD,OAAO,KAAK,MAAM,MAAM,qBAAqB,CAAC;AAC9C,OAAO,KAAK,YAAY,MAAM,2BAA2B,CAAC;AAC1D,OAAO,KAAK,GAAG,MAAM,OAAO,CAAC;AAE7B,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC;AACnC,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AACjC,OAAO,KAAK,IAAI,MAAM,QAAQ,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}

package/dist/types/extensions/pim/contrib/ArticleProduct.d.ts

@@ -0,0 +1,4 @@
+import { ContribComponent } from "../../../types";
+import { ArticleProductResponse } from "../types/contrib";
+declare const ArticleProductCard: ContribComponent<ArticleProductResponse>;
+export default ArticleProductCard;

package/dist/types/extensions/pim/index.d.ts

@@ -0,0 +1,2 @@
+import { ContribComponentMap } from "../../types";
+export declare const contrib: Record<string, ContribComponentMap>;

package/dist/types/extensions/pim/types/contrib.d.ts

@@ -0,0 +1,19 @@
+export interface ArticleProduct {
+    number: string;
+    item_type: string;
+    name: string;
+    description: string;
+    properties: object;
+    is_active: boolean;
+}
+export interface ArticleAsset {
+    id: string;
+    asset_type: string;
+    caption: string;
+    article_code: string;
+    url: string;
+}
+export interface ArticleProductResponse {
+    product: ArticleProduct;
+    assets: ArticleAsset[];
+}

package/dist/types/index.d.ts

@@ -65,6 +65,7 @@ export * as catalog from "./extensions/catalog";
 export * as fulfillment from "./extensions/fulfillment";
 export * as inventory from "./extensions/inventory";
 export * as member from "./extensions/member";
+export * as pim from "./extensions/pim";
 export * as pos from "./extensions/pos";
 export * as pricing from "./extensions/pricing";
 export * as report from "./extensions/report";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bananas-commerce-admin",
-  "version": "0.20.2",
+  "version": "0.20.3",
   "description": "What's this, an admin for apes?",
   "keywords": [
     "admin",
@@ -12,6 +12,11 @@
     "bananas-commerce-admin"
   ],
   "author": "Elias Sjögreen",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/5m/bananas-commerce.git",
+    "directory": "admin/packages/bananas-commerce-admin"
+  },
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",
   "types": "./dist/types/index.d.ts",

package/src/extensions/pim/contrib/ArticleProduct.tsx

@@ -0,0 +1,191 @@
+import React from "react";
+
+import { TableBody, TableHead, TableRow } from "@mui/material";
+import Box from "@mui/material/Box";
+import ImageList from "@mui/material/ImageList";
+import ImageListItem from "@mui/material/ImageListItem";
+import ImageListItemBar from "@mui/material/ImageListItemBar";
+import Modal from "@mui/material/Modal";
+
+import Card from "../../../components/Card";
+import CardContent from "../../../components/Card/CardContent";
+import CardFieldText from "../../../components/Card/CardFieldText";
+import CardHeader from "../../../components/Card/CardHeader";
+import CardRow from "../../../components/Card/CardRow";
+import Table from "../../../components/Table";
+import { TableCell } from "../../../components/Table/TableCell";
+import TableHeading from "../../../components/Table/TableHeading";
+import { useI18n } from "../../../contexts/I18nContext";
+import { ContribComponent } from "../../../types";
+import { capitalize } from "../../../util";
+import { ArticleAsset, ArticleProductResponse } from "../types/contrib";
+
+const ArticleProductCard: ContribComponent<ArticleProductResponse> = ({ data, params }) => {
+  const { t } = useI18n();
+  const [selectedAsset, setSelectedAsset] = React.useState<ArticleAsset | null>(null);
+
+  const { code: articleCode } = params as { code: string };
+  const { product, assets } = data;
+
+  const articleAssets = assets.filter(
+    (asset) => asset.article_code == articleCode || asset.article_code == "",
+  );
+  const imageAssets = articleAssets.filter((asset) => asset.asset_type == "image");
+  const otherAssets = articleAssets.filter((asset) => asset.asset_type !== "image");
+
+  const productProperties = Object.entries(product.properties);
+
+  return (
+    <Card columns={1} isEditable={false}>
+      <CardHeader title="Product" />
+
+      <CardContent>
+        <CardRow>
+          <CardFieldText formName="name" label={t("Name")} required={true} value={product.name} />
+        </CardRow>
+        <CardRow>
+          <CardFieldText
+            formName="description"
+            label={t("Description")}
+            required={true}
+            value={product.description}
+          />
+        </CardRow>
+      </CardContent>
+
+      {productProperties.length > 0 && (
+        <>
+          <CardHeader title={t("Properties")} />
+
+          <Table count={productProperties.length}>
+            <TableBody
+              sx={{
+                "& .MuiTableRow-root:first-of-type .MuiTableCell-root": (theme) => ({
+                  borderTop: `1px solid ${theme.palette.divider}`,
+                }),
+              }}
+            >
+              {productProperties
+                .sort((a, b) => (a[0] < b[0] ? -1 : 1))
+                .map((prop) => (
+                  <TableRow key={prop[0]}>
+                    <TableCell>{capitalize(prop[0])}</TableCell>
+                    <TableCell
+                      typographyProps={{
+                        variant: "caption",
+                        color: "text.secondary",
+                      }}
+                    >
+                      {prop[1]}
+                    </TableCell>
+                  </TableRow>
+                ))}
+            </TableBody>
+          </Table>
+        </>
+      )}
+
+      {articleAssets.length > 0 && <CardHeader title={t("Assets")} />}
+
+      {imageAssets.length > 0 && (
+        <>
+          <Modal
+            aria-describedby="modal-modal-description"
+            aria-labelledby="modal-modal-title"
+            open={selectedAsset !== null}
+            onClose={() => setSelectedAsset(null)}
+          >
+            <Box
+              sx={{
+                position: "absolute",
+                top: "50%",
+                left: "50%",
+                transform: "translate(-50%, -50%)",
+                width: "100vw", // Set explicit width
+                height: "100vh", // Set explicit height
+                bgcolor: "rgba(0, 0, 0, 0.7)", // Dark overlay background
+                boxShadow: 24,
+                p: 2, // Reduced padding
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                overflow: "hidden", // Hide any overflowing content
+                outline: "none",
+              }}
+              onClick={() => setSelectedAsset(null)}
+            >
+              {selectedAsset !== null && (
+                <img
+                  alt={selectedAsset.caption}
+                  loading="lazy"
+                  src={selectedAsset.url}
+                  style={{
+                    maxWidth: "100%",
+                    maxHeight: "100%",
+                    objectFit: "contain",
+                    borderRadius: "8px", // Subtle rounded corners for the image
+                  }}
+                />
+              )}
+            </Box>
+          </Modal>
+
+          <CardContent
+            sx={{
+              width: "100%",
+              height: 400,
+              overflowY: "scroll",
+              paddingTop: 0,
+              paddingBottom: 0,
+              paddingLeft: 3,
+              paddingRight: 3,
+            }}
+          >
+            <ImageList cols={3} gap={8} variant="masonry">
+              {imageAssets.map((asset) => (
+                <ImageListItem key={asset.id} onClick={() => setSelectedAsset(asset)}>
+                  <img alt={asset.caption} loading="lazy" src={asset.url} />
+                  <ImageListItemBar subtitle={asset.caption} />
+                </ImageListItem>
+              ))}
+            </ImageList>
+          </CardContent>
+        </>
+      )}
+
+      {otherAssets.length > 0 && (
+        <Table count={otherAssets.length}>
+          <TableHead>
+            <TableRow>
+              <TableHeading>{t("Asset ID")}</TableHeading>
+              <TableHeading align="right">{t("Type")}</TableHeading>
+              <TableHeading align="right">{t("Caption")}</TableHeading>
+            </TableRow>
+          </TableHead>
+
+          <TableBody
+            sx={{ ".MuiTableRow-root:last-child > .MuiTableCell-root": { borderBottom: "none" } }}
+          >
+            {otherAssets.map((asset) => (
+              <TableRow key={asset.id} sx={{ height: 56 }}>
+                <TableCell sx={{ py: 0 }}>
+                  <a href={asset.url} rel="noreferrer" target="_blank">
+                    {asset.id}
+                  </a>
+                </TableCell>
+                <TableCell align="right" sx={{ py: 0 }}>
+                  {asset.asset_type}
+                </TableCell>
+                <TableCell align="right" sx={{ py: 0 }}>
+                  {asset.caption}
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      )}
+    </Card>
+  );
+};
+
+export default ArticleProductCard;

package/src/extensions/pim/index.tsx

@@ -0,0 +1,16 @@
+import InventoryOutlinedIcon from "@mui/icons-material/InventoryOutlined";
+
+import { ArticleDetail } from "../../extensions/catalog";
+import { ContribComponentMap } from "../../types";
+
+export const contrib: Record<string, ContribComponentMap> = {
+  catalog: {
+    "catalog:article:detail:product": {
+      title: "Product",
+      icon: InventoryOutlinedIcon,
+      component: async () => (await import("./contrib/ArticleProduct")).default,
+      predicate: (article: ArticleDetail) => !!article.product_number,
+      variant: "inline",
+    },
+  },
+} as const;

package/src/extensions/pim/types/contrib.ts

@@ -0,0 +1,21 @@
+export interface ArticleProduct {
+  number: string;
+  item_type: string;
+  name: string;
+  description: string;
+  properties: object;
+  is_active: boolean;
+}
+
+export interface ArticleAsset {
+  id: string;
+  asset_type: string;
+  caption: string;
+  article_code: string;
+  url: string;
+}
+
+export interface ArticleProductResponse {
+  product: ArticleProduct;
+  assets: ArticleAsset[];
+}

package/src/index.ts

@@ -65,6 +65,7 @@ export * as catalog from "./extensions/catalog";
 export * as fulfillment from "./extensions/fulfillment";
 export * as inventory from "./extensions/inventory";
 export * as member from "./extensions/member";
+export * as pim from "./extensions/pim";
 export * as pos from "./extensions/pos";
 export * as pricing from "./extensions/pricing";
 export * as report from "./extensions/report";