bananas-commerce-admin 0.20.2 → 0.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bananas-commerce-admin",
-  "version": "0.20.2",
+  "version": "0.21.0",
   "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/components/Card/CardFieldAutoComplete.tsx

@@ -16,6 +16,9 @@ export interface CardFieldAutoCompleteProps extends CardFieldBaseProps, React.Pr
   isEditable?: boolean;
   type: "autocomplete";
   value: FormOption[];
+  autoSelect?: boolean;
+  clearOnBlur?: boolean;
+  freeSolo?: boolean;
 }
 
 export const CardFieldAutoComplete: React.FC<Omit<CardFieldAutoCompleteProps, "type">> = ({
@@ -29,6 +32,9 @@ export const CardFieldAutoComplete: React.FC<Omit<CardFieldAutoCompleteProps, "t
   options,
   size = "grow",
   value: defaultValue,
+  autoSelect = false,
+  clearOnBlur = false,
+  freeSolo = false,
   ...props
 }) => {
   const { isCompact, isEditing } = useCardContext();
@@ -41,13 +47,20 @@ export const CardFieldAutoComplete: React.FC<Omit<CardFieldAutoCompleteProps, "t
       {isEditing && isEditable ? (
         <Stack alignItems="center" justifyContent="space-between">
           <Autocomplete
+            autoSelect={autoSelect}
+            clearOnBlur={clearOnBlur}
+            freeSolo={freeSolo}
             isOptionEqualToValue={(option: FormOption, value: FormOption) => option.id === value.id}
             multiple={true}
             options={options ?? []}
             renderInput={(props) => <TextField {...props} label={label} />}
             sx={{ width: "100%" }}
             value={selectedOptions}
-            onChange={(_, value) => setSelectedOptions(value as FormOption[])}
+            onChange={(_, value) =>
+              setSelectedOptions(
+                value.map((v) => (typeof v == "string" ? { id: v, label: v } : v)) as FormOption[],
+              )
+            }
             {...props}
           />
 

package/src/components/Card/CardFieldSelect.tsx

@@ -21,6 +21,7 @@ export interface CardFieldSelectProps
   emptyValue?: FormOption;
   value: FormOption | undefined;
   isEditable?: boolean;
+  onUpdated?: (val: string) => void;
 }
 
 export const CardFieldSelect: React.FC<Omit<CardFieldSelectProps, "type">> = ({
@@ -37,6 +38,7 @@ export const CardFieldSelect: React.FC<Omit<CardFieldSelectProps, "type">> = ({
   required = false,
   size = "grow",
   value: defaultValue = undefined,
+  onUpdated,
   ...props
 }) => {
   const { isCompact, isEditing } = useCardContext();
@@ -44,9 +46,11 @@ export const CardFieldSelect: React.FC<Omit<CardFieldSelectProps, "type">> = ({
 
   const handleChange = useCallback(
     (event: SelectChangeEvent<unknown>) => {
-      setValue(event.target.value as string);
+      const currentValue = event.target.value as string;
+      setValue(currentValue);
+      if (onUpdated) onUpdated(currentValue);
     },
-    [setValue],
+    [setValue, onUpdated],
   );
 
   return (

package/src/components/Card/index.tsx

@@ -104,6 +104,26 @@ export interface CardProps<T = unknown> extends Omit<MuiCardProps, "onSubmit"> {
   gridProps?: Omit<Grid2Props, "size">;
 }
 
+function formDataToObject(
+  formData: FormData,
+): Record<string, FormDataEntryValue | FormDataEntryValue[]> {
+  const values: Record<string, FormDataEntryValue | FormDataEntryValue[]> = {};
+
+  for (const [key, value] of formData.entries()) {
+    const existing = values[key];
+
+    if (existing == null) {
+      values[key] = value;
+    } else if (Array.isArray(existing)) {
+      existing.push(value);
+    } else {
+      values[key] = [existing, value];
+    }
+  }
+
+  return values;
+}
+
 /**
  * A card component that wraps a form with `onSubmit` and provides `cardContext`.
  * This should be your building block for all admin forms not better represented by a Table.
@@ -168,7 +188,7 @@ export function Card<T>({
 
       const form = event.currentTarget;
       const formData = new FormData(form);
-      const values = Object.fromEntries(formData);
+      const values = formDataToObject(formData);
 
       setIsDisabled(true);
 

package/src/components/ContribInlines.tsx

@@ -10,12 +10,14 @@ import { usePage } from "./Page";
 export interface ContribInlinesProps {
   contribParams?: Record<string | number | symbol, unknown>;
   data?: unknown;
+  variant?: string;
 }
 
-export const ContribInlines: React.FC<ContribInlinesProps> = ({ contribParams, data }) => {
+export const ContribInlines: React.FC<ContribInlinesProps> = ({ contribParams, data, variant }) => {
   const params = useParams();
   const page = usePage();
   const { user } = useUser();
+  const componentVariant = variant ?? "inline";
 
   contribParams = { ...params, ...contribParams };
 
@@ -23,7 +25,8 @@ export const ContribInlines: React.FC<ContribInlinesProps> = ({ contribParams, d
     <>
       {page.contrib
         .filter(
-          (operation) => operation.method === "GET" && operation.component?.variant === "inline",
+          (operation) =>
+            operation.method === "GET" && operation.component?.variant === componentVariant,
         )
         .map((operation) => {
           if (operation.component?.predicate && data && !operation.component?.predicate(data))

package/src/extensions/catalog/components/ArticleCard.tsx

@@ -34,6 +34,19 @@ export type ArticleCardProps =
       onUpdated: (article: ArticleDetail) => void;
     };
 
+export interface ArticleCardFormValues {
+  code: string;
+  item_type: string;
+  is_active: string;
+  name: string;
+  description: string;
+  product_number: string;
+  model_number: string;
+  tax_code: string;
+  gtin: string;
+  variant: string;
+}
+
 export const ArticleCard: React.FC<ArticleCardProps> = ({
   article,
   create,
@@ -62,7 +75,7 @@ export const ArticleCard: React.FC<ArticleCardProps> = ({
   };
 
   const handleSave = useCallback(
-    async (values: unknown) => {
+    async ({ is_active, ...values }: ArticleCardFormValues) => {
       if (create != null) {
         const action = api.operations["catalog.article:create"];
         if (!action) {
@@ -71,7 +84,10 @@ export const ArticleCard: React.FC<ArticleCardProps> = ({
 
         const response = await action.call({
           params,
-          body: values,
+          body: {
+            is_active: is_active == "on",
+            ...values,
+          },
         });
 
         if (response.ok) {
@@ -90,7 +106,10 @@ export const ArticleCard: React.FC<ArticleCardProps> = ({
 
         const response = await action.call({
           params,
-          body: values,
+          body: {
+            is_active: is_active == "on",
+            ...values,
+          },
         });
 
         if (response.ok) {
@@ -173,7 +192,6 @@ export const ArticleCard: React.FC<ArticleCardProps> = ({
                 size={1}
                 value={article.gtin}
               />
-              <input name="is_active" type="hidden" value="false" />
               <CardFieldCheckbox
                 formName="is_active"
                 label={t("Active")}

package/src/extensions/catalog/contrib/ProductArticles.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+
+import NavigateNextIcon from "@mui/icons-material/NavigateNext";
+import { TableBody, TableRow } from "@mui/material";
+
+import Card from "../../../components/Card";
+import CardContent from "../../../components/Card/CardContent";
+import CardHeader from "../../../components/Card/CardHeader";
+import Table from "../../../components/Table";
+import { TableCell } from "../../../components/Table/TableCell";
+import { useI18n } from "../../../contexts/I18nContext";
+import { useRouter } from "../../../contexts/RouterContext";
+import { ContribComponent } from "../../../types";
+import { ProductArticle } from "../types/contrib";
+
+const ProductArticlesCard: ContribComponent<ProductArticle[]> = ({ data }) => {
+  const { t } = useI18n();
+  const { navigate } = useRouter();
+
+  const articles = data;
+
+  return (
+    <Card>
+      <CardHeader title={t("Articles")} />
+      <CardContent
+        sx={{
+          p: 0,
+          "&:last-child": { pb: 0 },
+        }}
+      >
+        <Table
+          count={articles.length}
+          tableContainerProps={{
+            sx: (theme) => ({
+              borderTop: `1px solid ${theme.palette.divider}`,
+              px: 0,
+            }),
+          }}
+        >
+          <TableBody
+            sx={{
+              "& .MuiTableRow-root:first-of-type .MuiTableCell-root": (theme) => ({
+                borderTop: `1px solid ${theme.palette.divider}`,
+              }),
+              "& .MuiTableRow-root:last-of-type .MuiTableCell-root": {
+                borderBottom: "none",
+              },
+            }}
+          >
+            {articles.map((article) => {
+              return (
+                <TableRow
+                  key={article.id}
+                  hover
+                  sx={() => ({
+                    cursor: "pointer",
+                  })}
+                  onClick={() => navigate("catalog.article:detail", { params: { id: article.id } })}
+                >
+                  <TableCell>{article.variant}</TableCell>
+                  <TableCell
+                    typographyProps={{
+                      variant: "caption",
+                      color: "text.secondary",
+                    }}
+                  >
+                    {article.code}
+                  </TableCell>
+                  <TableCell align="right" padding="checkbox">
+                    <NavigateNextIcon color="action" fontSize="small" />
+                  </TableCell>
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default ProductArticlesCard;

package/src/extensions/catalog/index.tsx

@@ -62,4 +62,13 @@ export const contrib: Record<string, ContribComponentMap> = {
       permission: "catalog.view_article",
     },
   },
+  pim: {
+    "pim:product:detail:articles": {
+      title: "Product",
+      icon: StorefrontIcon,
+      component: async () => (await import("./contrib/ProductArticles")).default,
+      variant: "sidebar",
+      permission: "catalog.view_article",
+    },
+  },
 } as const;

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

@@ -14,3 +14,12 @@ export interface SiteItem {
 export interface SiteItemsResponse {
   items: SiteItem[];
 }
+
+export interface ProductArticle {
+  id: number;
+  item_type: string;
+  name: string;
+  variant: string;
+  code: string;
+  is_active: boolean;
+}

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

@@ -0,0 +1,242 @@
+import React, { useCallback, useMemo, useState } from "react";
+import { useParams } from "react-router-dom";
+
+import CancelIcon from "@mui/icons-material/Cancel";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+
+import Card from "../../../components/Card";
+import CardActions from "../../../components/Card/CardActions";
+import CardCancelButton from "../../../components/Card/CardCancelButton";
+import CardContent from "../../../components/Card/CardContent";
+import CardFieldCheckbox from "../../../components/Card/CardFieldCheckbox";
+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 CardSaveButton from "../../../components/Card/CardSaveButton";
+import { useApi } from "../../../contexts/ApiContext";
+import { useI18n } from "../../../contexts/I18nContext";
+import { useUser } from "../../../contexts/UserContext";
+import { hasPermission } from "../../../util/has_permission";
+import { ProductCreated, ProductDetail, ProductItemTypeOption } from "../types/product";
+
+import { ProductPropertyField } from "./ProductPropertyField";
+
+export type ProductCardProps =
+  | {
+      create: true;
+      product?: ProductDetail;
+      onCreated: (product: ProductCreated) => void;
+      onUpdated?: never;
+      itemTypes: ProductItemTypeOption[];
+    }
+  | {
+      create?: false;
+      product: ProductDetail;
+      onCreated?: never;
+      onUpdated: (product: ProductDetail) => void;
+      itemTypes: ProductItemTypeOption[];
+    };
+
+export interface ProductCardFormValues {
+  number: string;
+  item_type: string;
+  is_active: string;
+  name: string;
+  description: string;
+}
+
+export const ProductCard: React.FC<ProductCardProps> = ({
+  product,
+  create,
+  onCreated,
+  onUpdated,
+  itemTypes,
+}) => {
+  const params = useParams();
+  const api = useApi();
+  const { t } = useI18n();
+  const { user } = useUser();
+  const canCreate = useMemo(() => hasPermission(user, "pim.add_product"), [user]);
+  const canChange = useMemo(() => hasPermission(user, "pim.change_product"), [user]);
+
+  product ??= {
+    id: 0,
+    name: "",
+    description: "",
+    item_type: "",
+    number: "",
+    is_active: true,
+  } as ProductDetail;
+
+  const [productItemType, setProductItemType] = useState<ProductItemTypeOption | undefined>(
+    undefined,
+  );
+  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;
+    },
+    [],
+  );
+
+  const handleSave = useCallback(
+    async ({ is_active, ...values }: ProductCardFormValues) => {
+      if (create != null) {
+        const action = api.operations["pim.product:create"];
+        if (!action) {
+          throw new Error('Invalid action "pim.product:create".');
+        }
+
+        const productData: Record<string, unknown> = {};
+        const productProperties: Record<string, unknown> = {};
+
+        for (const [key, value] of Object.entries(values)) {
+          if (key.startsWith("properties.")) {
+            const propertyName = key.replace("properties.", "");
+            productProperties[propertyName] = value;
+          } else {
+            productData[key] = value;
+          }
+        }
+
+        const response = await action.call({
+          params,
+          body: {
+            is_active: is_active == "on",
+            ...productData,
+            properties: productProperties,
+          },
+        });
+
+        if (response.ok) {
+          const createdProduct = await response.json();
+          onCreated?.(createdProduct);
+          return t("Product created successfully.");
+        } else {
+          console.error("[PRODUCT_CARD]", response);
+          throw new Error("creating product.");
+        }
+      } else {
+        const action = api.operations["pim.product:update"];
+        if (!action) {
+          throw new Error('Invalid action "pim.product:update".');
+        }
+
+        const response = await action.call({
+          params,
+          body: {
+            is_active: is_active == "on",
+            ...values,
+          },
+        });
+
+        if (response.ok) {
+          const updatedProduct = await response.json();
+          onUpdated?.(updatedProduct);
+          return t("Product updated successfully.");
+        } else {
+          console.error("[PRODUCT_CARD]", response);
+          throw new Error("updating product fields.");
+        }
+      }
+    },
+    [api, params, create, onCreated, onUpdated, t],
+  );
+
+  return (
+    <Card
+      alwaysEditable={create && canCreate}
+      columns={3}
+      defaultEditing={create && canCreate}
+      isEditable={(create && canCreate) || (!create && canChange)}
+      onSubmit={handleSave}
+    >
+      <CardHeader title={t("Product")} />
+
+      <CardContent>
+        <CardRow>
+          <CardFieldText
+            formName="number"
+            label={t("Product number")}
+            required={true}
+            value={product.number}
+          />
+
+          <CardFieldSelect
+            formName="item_type"
+            label={t("Type")}
+            options={itemTypes.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
+            }
+            onUpdated={(value) => {
+              const selectedItemType = itemTypes.find((itemType) => itemType.name == value);
+              setProductItemType(selectedItemType);
+            }}
+          />
+
+          <CardFieldCheckbox
+            formName="is_active"
+            label={t("Active")}
+            noValue={<CancelIcon color="error" fontSize="small" />}
+            size={1}
+            value={product.is_active}
+            yesValue={<CheckCircleIcon color="success" fontSize="small" />}
+          />
+        </CardRow>
+
+        <CardRow>
+          <CardFieldText
+            formName="name"
+            label={t("Name")}
+            required={true}
+            size={3}
+            value={product.name}
+          />
+        </CardRow>
+        <CardRow>
+          <CardFieldText
+            formName="description"
+            label={t("Description")}
+            size={3}
+            value={product.description}
+          />
+        </CardRow>
+      </CardContent>
+
+      {create && productPropertiesRows.length > 0 && (
+        <>
+          <CardHeader title={t("Properties")} />
+
+          <CardContent>
+            {productPropertiesRows.map((row, index) => (
+              <CardRow key={index}>
+                {row.map((prop) => (
+                  <ProductPropertyField
+                    key={`properties.${prop.name}`}
+                    formName={`properties.${prop.name}`}
+                    property={prop}
+                    value={undefined}
+                  />
+                ))}
+              </CardRow>
+            ))}
+          </CardContent>
+        </>
+      )}
+
+      {(canChange || canCreate) && (
+        <CardActions>
+          {!create && <CardCancelButton />}
+          <CardSaveButton label={create ? "Create" : "Save"} />
+        </CardActions>
+      )}
+    </Card>
+  );
+};

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

@@ -0,0 +1,114 @@
+import React from "react";
+import { useParams } from "react-router-dom";
+
+import Card from "../../../components/Card";
+import CardActions from "../../../components/Card/CardActions";
+import CardCancelButton from "../../../components/Card/CardCancelButton";
+import CardContent from "../../../components/Card/CardContent";
+import CardHeader from "../../../components/Card/CardHeader";
+import CardRow from "../../../components/Card/CardRow";
+import CardSaveButton from "../../../components/Card/CardSaveButton";
+import { useApi } from "../../../contexts/ApiContext";
+import { useI18n } from "../../../contexts/I18nContext";
+import { useUser } from "../../../contexts/UserContext";
+import { hasPermission } from "../../../util/has_permission";
+import { ProductItemTypeOption, ProductPropertiesData } from "../types/product";
+
+import { ProductPropertyField } from "./ProductPropertyField";
+
+export interface ProductPropertiesCardProps {
+  itemType: ProductItemTypeOption;
+  productProperties: ProductPropertiesData;
+  setProductProperties: (properties: ProductPropertiesData) => void;
+}
+
+export const ProductPropertiesCard: React.FC<ProductPropertiesCardProps> = ({
+  itemType,
+  productProperties,
+  setProductProperties,
+}) => {
+  const params = useParams();
+  const api = useApi();
+  const { t } = useI18n();
+  const { user } = useUser();
+
+  const productPropertiesList = itemType ? itemType.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;
+    },
+    [],
+  );
+
+  const handleSubmit = async (values: ProductPropertiesData) => {
+    const action = api.operations["pim.product:update"];
+    if (!action) {
+      throw new Error('Invalid action "pim.product:update".');
+    }
+
+    productPropertiesList.map((prop) => {
+      switch (prop.type) {
+        case "array": {
+          values[prop.name] =
+            typeof values[prop.name] === "string"
+              ? [values[prop.name] as string]
+              : ((values[prop.name] as string[]) ?? []);
+          break;
+        }
+      }
+    });
+
+    const response = await action.call({
+      params,
+      body: {
+        item_type: itemType.name,
+        properties: {
+          ...values,
+        },
+      },
+    });
+
+    if (response.ok) {
+      const updatedProduct = await response.json();
+      setProductProperties(updatedProduct.properties);
+      return t("Product properties updated successfully.");
+    } else {
+      console.error("[PRODUCT_PROPERTIES_CARD]", response);
+      throw new Error("updating product properties fields.");
+    }
+  };
+
+  return (
+    <>
+      <Card<ProductPropertiesData>
+        columns={2}
+        isEditable={hasPermission(user, "pim.change_product")}
+        onSubmit={handleSubmit}
+      >
+        <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>
+
+        <CardActions>
+          <CardCancelButton />
+          <CardSaveButton />
+        </CardActions>
+      </Card>
+    </>
+  );
+};