bananas-commerce-admin 0.20.2 → 0.21.0

package/src/extensions/pim/components/ProductPropertyField.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+
+import CardFieldAutoComplete from "../../../components/Card/CardFieldAutoComplete";
+import CardFieldNumber from "../../../components/Card/CardFieldNumber";
+import CardFieldText from "../../../components/Card/CardFieldText";
+import { ProductProperty, ProductPropertyValue } from "../types/product";
+
+export interface ProductPropertyFieldProps {
+  property: ProductProperty;
+  value: ProductPropertyValue;
+  formName?: string;
+}
+
+export const ProductPropertyField: React.FC<ProductPropertyFieldProps> = ({
+  property,
+  value,
+  formName,
+}) => {
+  switch (property.type) {
+    case "string": {
+      const currentValue = value as string;
+      return (
+        <CardFieldText
+          formName={formName ?? property.name}
+          label={property.title}
+          required={property.min_length ? true : false}
+          value={currentValue}
+        />
+      );
+    }
+
+    case "integer": {
+      const currentValue = parseInt(value as string);
+      return (
+        <CardFieldNumber
+          formName={formName ?? property.name}
+          label={property.title}
+          max={property.max_value}
+          min={property.min_value}
+          required={property.min_value !== undefined ? true : false}
+          value={Number.isNaN(currentValue) ? undefined : currentValue}
+        />
+      );
+    }
+
+    case "array": {
+      const currentValue = value as string[];
+
+      return (
+        <CardFieldAutoComplete
+          autoSelect
+          clearOnBlur
+          freeSolo
+          fallback={"—"}
+          formName={formName ?? property.name}
+          label={property.title}
+          value={(currentValue ?? []).map((val: ProductPropertyValue) => ({
+            id: val as string,
+            label: val as string,
+          }))}
+        />
+      );
+    }
+  }
+
+  return <></>;
+};

package/src/extensions/pim/components/ProductRow.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+import CancelIcon from "@mui/icons-material/Cancel";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+
+import { TableCell } from "../../../components/Table/TableCell";
+import { NavigatingTableRow } from "../../../components/Table/TableRow";
+import { ProductList } from "../types/product";
+
+export interface ProductRowProps {
+  product: ProductList;
+}
+
+export const ProductRow: React.FC<ProductRowProps> = ({ product }) => (
+  <NavigatingTableRow route="pim.product:detail" routeParams={{ id: product.id }}>
+    <TableCell>{product.name}</TableCell>
+    <TableCell>{product.item_type}</TableCell>
+    <TableCell>{product.number}</TableCell>
+    <TableCell align="right">
+      {product.is_active ? <CheckCircleIcon color="success" /> : <CancelIcon color="error" />}
+    </TableCell>
+  </NavigatingTableRow>
+);

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

@@ -0,0 +1,215 @@
+import React, { useEffect, useState } 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 CardFieldSelect from "../../../components/Card/CardFieldSelect";
+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 { useApi } from "../../../contexts/ApiContext";
+import { useI18n } from "../../../contexts/I18nContext";
+import { ContribComponent } from "../../../types";
+import { ProductPropertyField } from "../components/ProductPropertyField";
+import { ArticleAsset, ArticleProductResponse } from "../types/contrib";
+import { ProductItemTypeOption, ProductPropertiesData } from "../types/product";
+
+const ArticleProductCard: ContribComponent<ArticleProductResponse> = ({ data, params }) => {
+  const { t } = useI18n();
+  const api = useApi();
+  const [selectedAsset, setSelectedAsset] = useState<ArticleAsset | null>(null);
+  const [productItemTypes, setProductItemTypes] = useState<ProductItemTypeOption[]>([]);
+
+  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 = product.properties as ProductPropertiesData;
+  const productItemType = productItemTypes.find((itemType) => itemType.name == product.item_type);
+  const productPropertiesList = productItemType ? productItemType.product_properties : [];
+  const productPropertiesRows = productPropertiesList.reduce<(typeof productPropertiesList)[]>(
+    (rows, prop, index) => {
+      if (index % 2 === 0) rows.push([prop]);
+      else rows[rows.length - 1].push(prop);
+      return rows;
+    },
+    [],
+  );
+
+  useEffect(() => {
+    api.operations["pim.item_types:options"].call({}).then(async (response) => {
+      if (response.ok) {
+        setProductItemTypes(await response.json());
+      }
+    });
+  }, []);
+
+  return (
+    <Card columns={2} isEditable={false}>
+      <CardHeader title="Product" />
+
+      <CardContent>
+        <CardRow>
+          <CardFieldText formName="name" label={t("Name")} required={true} value={product.name} />
+          <CardFieldSelect
+            formName="item_type"
+            label={t("Type")}
+            options={productItemTypes.map((itemType) => ({
+              id: itemType.name,
+              label: itemType.name,
+            }))}
+            required={true}
+            size={1}
+            value={
+              product.item_type ? { id: product.item_type, label: product.item_type } : undefined
+            }
+          />
+        </CardRow>
+        <CardRow>
+          <CardFieldText
+            formName="description"
+            label={t("Description")}
+            required={true}
+            value={product.description}
+          />
+        </CardRow>
+      </CardContent>
+
+      {productPropertiesRows.length > 0 && (
+        <>
+          <CardHeader title={t("Properties")} />
+
+          <CardContent>
+            {productPropertiesRows.map((row, index) => (
+              <CardRow key={index}>
+                {row.map((prop) => (
+                  <ProductPropertyField
+                    key={prop.name}
+                    property={prop}
+                    value={productProperties[prop.name]}
+                  />
+                ))}
+              </CardRow>
+            ))}
+          </CardContent>
+        </>
+      )}
+
+      {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,67 @@
+import InventoryOutlinedIcon from "@mui/icons-material/InventoryOutlined";
+
+import { OpenAPI } from "openapi-types";
+
+import WorkspacesIcon from "../../assets/symbols/Workspaces";
+import { ArticleDetail } from "../../extensions/catalog";
+import { RouterExtension } from "../../router/Router";
+import { ContribComponentMap, NavigationOverrides, PageComponent } from "../../types";
+
+export * from "./types/contrib";
+export * from "./types/product";
+
+const routes: Record<
+  string,
+  Record<
+    string,
+    {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      page: () => PageComponent<any> | Promise<PageComponent<any>>;
+      request?: OpenAPI.Request;
+      defaultRequest?: OpenAPI.Request;
+      offline?: boolean;
+    }
+  >
+> = {
+  product: {
+    create: { page: async () => (await import("./pages/product/create")).default, offline: true },
+    detail: { page: async () => (await import("./pages/product/detail")).default },
+    list: { page: async () => (await import("./pages/product/list")).default },
+  },
+};
+
+export const router: RouterExtension = {
+  app: "pim",
+  pages: (route) => {
+    const { page, ...hit } = routes[route.view]?.[route.action] ?? {};
+
+    if (page != null) {
+      return {
+        page: page(),
+        ...hit,
+      };
+    }
+
+    return undefined;
+  },
+};
+
+export const navigation: NavigationOverrides = {
+  "pim.product:list": {
+    icon: WorkspacesIcon,
+    permission: "pim.view_product",
+  },
+} as const;
+
+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",
+      permission: "pim.view_product",
+    },
+  },
+} as const;

package/src/extensions/pim/pages/product/create.tsx

@@ -0,0 +1,63 @@
+import React, { useEffect, useState } from "react";
+
+import CategoryOutlinedIcon from "@mui/icons-material/CategoryOutlined";
+
+import { Header } from "../../../../components/Header";
+import { Page } from "../../../../components/Page";
+import { Tab } from "../../../../components/Tab";
+import { TabPanel } from "../../../../components/TabPanel";
+import { TabPanels } from "../../../../components/TabPanels";
+import { Tabs } from "../../../../components/Tabs";
+import { TitleBar } from "../../../../components/TitleBar";
+import Content, { LeftColumn } from "../../../../containers/Content";
+import { useApi } from "../../../../contexts/ApiContext";
+import { useRouter } from "../../../../contexts/RouterContext";
+import { PageComponent } from "../../../../types";
+import { ProductCard } from "../../components/ProductCard";
+import { ProductItemTypeOption } from "../../types/product";
+
+const ProductCreatePage: PageComponent = () => {
+  const { navigate } = useRouter();
+  const api = useApi();
+
+  const [productItemTypes, setProductItemTypes] = useState<ProductItemTypeOption[]>([]);
+
+  useEffect(() => {
+    api.operations["pim.item_types:options"].call({}).then(async (response) => {
+      if (response.ok) {
+        setProductItemTypes(await response.json());
+      }
+    });
+  }, []);
+
+  return (
+    <Page>
+      <Header variant="opaque">
+        <TitleBar title="Create Product" />
+        <Tabs>
+          <Tab key="default" icon={<CategoryOutlinedIcon />} label="Product" value="default" />
+        </Tabs>
+      </Header>
+
+      <TabPanels>
+        <TabPanel key="default" value="default">
+          <Content layout="fixedWidth">
+            <LeftColumn>
+              <ProductCard
+                create
+                itemTypes={productItemTypes}
+                onCreated={(product) => {
+                  navigate(`pim.product:detail`, {
+                    params: { id: product.id },
+                  });
+                }}
+              />
+            </LeftColumn>
+          </Content>
+        </TabPanel>
+      </TabPanels>
+    </Page>
+  );
+};
+
+export default ProductCreatePage;

package/src/extensions/pim/pages/product/detail.tsx

@@ -0,0 +1,85 @@
+import React, { useEffect, useState } from "react";
+
+import CategoryOutlinedIcon from "@mui/icons-material/CategoryOutlined";
+import Typography from "@mui/material/Typography";
+
+import { ContribInlines } from "../../../../components/ContribInlines";
+import { Header } from "../../../../components/Header";
+import { Page } from "../../../../components/Page";
+import { Tab } from "../../../../components/Tab";
+import { TabPanel } from "../../../../components/TabPanel";
+import { TabPanels } from "../../../../components/TabPanels";
+import { Tabs } from "../../../../components/Tabs";
+import { TitleBar } from "../../../../components/TitleBar";
+import Content, { LeftColumn, RightColumn } from "../../../../containers/Content";
+import { useApi } from "../../../../contexts/ApiContext";
+import { PageComponent } from "../../../../types";
+import { ProductCard } from "../../components/ProductCard";
+import { ProductPropertiesCard } from "../../components/ProductPropertiesCard";
+import { ProductDetail, ProductItemTypeOption } from "../../types/product";
+
+const ProductDetailPage: PageComponent<ProductDetail> = ({ data }) => {
+  const [product, setProduct] = useState(data);
+  const [productItemTypes, setProductItemTypes] = useState<ProductItemTypeOption[]>([]);
+  const api = useApi();
+
+  useEffect(() => {
+    api.operations["pim.item_types:options"].call({}).then(async (response) => {
+      if (response.ok) {
+        setProductItemTypes(await response.json());
+      }
+    });
+  }, []);
+
+  const productItemType = productItemTypes.find((itemType) => itemType.name == product.item_type);
+
+  return (
+    <Page>
+      <Header variant="opaque">
+        <TitleBar
+          title={
+            <>
+              {data.name}
+              <Typography sx={{ pl: 1 }} variant="button">
+                {data.number}
+              </Typography>
+            </>
+          }
+        />
+        <Tabs data={product}>
+          <Tab key="default" icon={<CategoryOutlinedIcon />} label="Product" value="default" />
+        </Tabs>
+      </Header>
+
+      <TabPanels contribParams={{ number: data.number }}>
+        <TabPanel key="default" value="default">
+          <Content layout="fixedWidth">
+            <LeftColumn>
+              <ProductCard itemTypes={productItemTypes} product={product} onUpdated={setProduct} />
+
+              {productItemType && (
+                <ProductPropertiesCard
+                  itemType={productItemType}
+                  productProperties={product.properties}
+                  setProductProperties={(properties) =>
+                    setProduct((previous) => ({ ...previous, properties }))
+                  }
+                />
+              )}
+              <ContribInlines contribParams={{ number: data.number }} data={data} />
+            </LeftColumn>
+            <RightColumn>
+              <ContribInlines
+                contribParams={{ number: data.number }}
+                data={data}
+                variant="sidebar"
+              />
+            </RightColumn>
+          </Content>
+        </TabPanel>
+      </TabPanels>
+    </Page>
+  );
+};
+
+export default ProductDetailPage;

package/src/extensions/pim/pages/product/list.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+
+import { Button, TableBody } from "@mui/material";
+
+import ActionBar from "../../../../components/ActionBar";
+import { Header } from "../../../../components/Header";
+import { Page } from "../../../../components/Page";
+import SearchBar from "../../../../components/SearchBar";
+import Table from "../../../../components/Table";
+import TableHead from "../../../../components/Table/TableHead";
+import TableHeading from "../../../../components/Table/TableHeading";
+import TableCard from "../../../../components/TableCard";
+import { TitleBar } from "../../../../components/TitleBar";
+import Content, { ContentWrapperWithActionBar } from "../../../../containers/Content";
+import { useI18n } from "../../../../contexts/I18nContext";
+import { useRouter } from "../../../../contexts/RouterContext";
+import { useUser } from "../../../../contexts/UserContext";
+import { LimitOffset, PageComponent } from "../../../../types";
+import { hasPermission } from "../../../../util/has_permission";
+import { ProductRow } from "../../components/ProductRow";
+import { ProductList } from "../../types/product";
+
+const ProductListPage: PageComponent<LimitOffset<ProductList>> = ({ data }) => {
+  const { navigate } = useRouter();
+  const { user } = useUser();
+  const { t } = useI18n();
+
+  return (
+    <Page>
+      <Header>
+        <TitleBar title={t("Products")}>
+          <SearchBar
+            defaultValue={new URLSearchParams(window.location.search).get("search") ?? ""}
+            placeholder={t("Search for product number or name")}
+            onSubmit={(input) => {
+              if (input === "") {
+                navigate("pim.product:list", {
+                  replace: true,
+                });
+              } else {
+                navigate("pim.product:list", {
+                  query: {
+                    search: input,
+                  },
+                  replace: true,
+                });
+              }
+            }}
+          />
+        </TitleBar>
+      </Header>
+
+      <ContentWrapperWithActionBar>
+        <Content layout="fullWidth">
+          <TableCard>
+            <Table pagination count={data?.count}>
+              <TableHead>
+                <TableHeading>{t("Name")}</TableHeading>
+                <TableHeading>{t("Type")}</TableHeading>
+                <TableHeading>{t("Product Number")}</TableHeading>
+                <TableHeading align="right">{t("Active")}</TableHeading>
+              </TableHead>
+
+              <TableBody>
+                {data?.results.map((product) => <ProductRow key={product.id} product={product} />)}
+              </TableBody>
+            </Table>
+          </TableCard>
+        </Content>
+
+        {hasPermission(user, "pim.add_product") && (
+          <ActionBar>
+            <Button
+              color="primary"
+              variant="contained"
+              onClick={() => navigate("pim.product:create")}
+            >
+              {t("Create product")}
+            </Button>
+          </ActionBar>
+        )}
+      </ContentWrapperWithActionBar>
+    </Page>
+  );
+};
+
+export default ProductListPage;

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/extensions/pim/types/product.ts

@@ -0,0 +1,52 @@
+export interface ProductList {
+  id: number;
+  number: string;
+  item_type: string;
+  name: string;
+  description: string;
+  is_active: boolean;
+}
+
+export type ProductPropertyValue =
+  | string
+  | number
+  | boolean
+  | string[]
+  | number[]
+  | boolean[]
+  | null
+  | undefined;
+export type ProductPropertiesData = Record<
+  string,
+  string | number | boolean | string[] | number[] | boolean[]
+>;
+
+export interface ProductDetail {
+  id: number;
+  number: string;
+  item_type: string;
+  name: string;
+  description: string;
+  is_active: boolean;
+  properties: ProductPropertiesData;
+}
+
+export interface ProductCreated {
+  id: number;
+}
+
+export interface ProductProperty {
+  name: string;
+  title: string;
+  type: string;
+
+  min_length?: number;
+  min_value?: number;
+  max_value?: number;
+  array_type?: string;
+}
+
+export interface ProductItemTypeOption {
+  name: string;
+  product_properties: ProductProperty[];
+}