@mercurjs/admin 2.0.0-canary.24

package/dist/category-edit-PTYOK7VV.js

@@ -0,0 +1,220 @@
+import {
+  HandleInput
+} from "./chunk-TLE6YHGH.js";
+import "./chunk-TKGWSUEI.js";
+import {
+  KeyboundForm
+} from "./chunk-U2ZFCAPX.js";
+import {
+  RouteDrawer,
+  useRouteModal
+} from "./chunk-MWOKFNRO.js";
+import {
+  Form
+} from "./chunk-3QSRE5LS.js";
+import {
+  useDocumentDirection
+} from "./chunk-Y7QKP6QU.js";
+import {
+  useProductCategory,
+  useUpdateProductCategory
+} from "./chunk-XCMR2HTV.js";
+import "./chunk-T435NFHC.js";
+import "./chunk-2KCF3ZIB.js";
+import "./chunk-ZYNBKBY3.js";
+import "./chunk-NBMM2TZK.js";
+
+// src/pages/categories/category-edit/category-edit.tsx
+import { Heading } from "@medusajs/ui";
+import { useTranslation as useTranslation2 } from "react-i18next";
+import { useParams } from "react-router-dom";
+
+// src/pages/categories/category-edit/components/edit-category-form/edit-category-form.tsx
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Button, Input, Select, Textarea, toast } from "@medusajs/ui";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { z } from "zod";
+import { jsx, jsxs } from "react/jsx-runtime";
+var EditCategorySchema = z.object({
+  name: z.string().min(1),
+  handle: z.string().min(1),
+  description: z.string().optional(),
+  status: z.enum(["active", "inactive"]),
+  visibility: z.enum(["public", "internal"])
+});
+var EditCategoryForm = ({ category }) => {
+  const { t } = useTranslation();
+  const { handleSuccess } = useRouteModal();
+  const direction = useDocumentDirection();
+  const form = useForm({
+    defaultValues: {
+      name: category.name,
+      handle: category.handle,
+      description: category.description || "",
+      status: category.is_active ? "active" : "inactive",
+      visibility: category.is_internal ? "internal" : "public"
+    },
+    resolver: zodResolver(EditCategorySchema)
+  });
+  const { mutateAsync, isPending } = useUpdateProductCategory(category.id);
+  const handleSubmit = form.handleSubmit(async (data) => {
+    await mutateAsync(
+      {
+        name: data.name,
+        description: data.description,
+        handle: data.handle,
+        is_active: data.status === "active",
+        is_internal: data.visibility === "internal"
+      },
+      {
+        onSuccess: () => {
+          toast.success(t("categories.edit.successToast"));
+          handleSuccess();
+        },
+        onError: (error) => {
+          toast.error(error.message);
+        }
+      }
+    );
+  });
+  return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, children: /* @__PURE__ */ jsxs(KeyboundForm, { onSubmit: handleSubmit, className: "flex flex-1 flex-col", children: [
+    /* @__PURE__ */ jsx(RouteDrawer.Body, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-4", children: [
+      /* @__PURE__ */ jsx(
+        Form.Field,
+        {
+          control: form.control,
+          name: "name",
+          render: ({ field }) => {
+            return /* @__PURE__ */ jsxs(Form.Item, { children: [
+              /* @__PURE__ */ jsx(Form.Label, { children: t("fields.title") }),
+              /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(Input, { autoComplete: "off", ...field }) }),
+              /* @__PURE__ */ jsx(Form.ErrorMessage, {})
+            ] });
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Form.Field,
+        {
+          control: form.control,
+          name: "handle",
+          render: ({ field }) => {
+            return /* @__PURE__ */ jsxs(Form.Item, { children: [
+              /* @__PURE__ */ jsx(
+                Form.Label,
+                {
+                  optional: true,
+                  tooltip: t("collections.handleTooltip"),
+                  children: t("fields.handle")
+                }
+              ),
+              /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(HandleInput, { ...field }) }),
+              /* @__PURE__ */ jsx(Form.ErrorMessage, {})
+            ] });
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Form.Field,
+        {
+          control: form.control,
+          name: "description",
+          render: ({ field }) => {
+            return /* @__PURE__ */ jsxs(Form.Item, { children: [
+              /* @__PURE__ */ jsx(Form.Label, { optional: true, children: t("fields.description") }),
+              /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(Textarea, { ...field }) }),
+              /* @__PURE__ */ jsx(Form.ErrorMessage, {})
+            ] });
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [
+        /* @__PURE__ */ jsx(
+          Form.Field,
+          {
+            control: form.control,
+            name: "status",
+            render: ({ field: { ref, onChange, ...field } }) => {
+              return /* @__PURE__ */ jsxs(Form.Item, { children: [
+                /* @__PURE__ */ jsx(Form.Label, { children: t("categories.fields.status.label") }),
+                /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsxs(
+                  Select,
+                  {
+                    dir: direction,
+                    ...field,
+                    onValueChange: onChange,
+                    children: [
+                      /* @__PURE__ */ jsx(Select.Trigger, { ref, children: /* @__PURE__ */ jsx(Select.Value, {}) }),
+                      /* @__PURE__ */ jsxs(Select.Content, { children: [
+                        /* @__PURE__ */ jsx(Select.Item, { value: "active", children: t("categories.fields.status.active") }),
+                        /* @__PURE__ */ jsx(Select.Item, { value: "inactive", children: t("categories.fields.status.inactive") })
+                      ] })
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(Form.ErrorMessage, {})
+              ] });
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Form.Field,
+          {
+            control: form.control,
+            name: "visibility",
+            render: ({ field: { ref, onChange, ...field } }) => {
+              return /* @__PURE__ */ jsxs(Form.Item, { children: [
+                /* @__PURE__ */ jsx(Form.Label, { children: t("categories.fields.visibility.label") }),
+                /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsxs(
+                  Select,
+                  {
+                    dir: direction,
+                    ...field,
+                    onValueChange: onChange,
+                    children: [
+                      /* @__PURE__ */ jsx(Select.Trigger, { ref, children: /* @__PURE__ */ jsx(Select.Value, {}) }),
+                      /* @__PURE__ */ jsxs(Select.Content, { children: [
+                        /* @__PURE__ */ jsx(Select.Item, { value: "public", children: t("categories.fields.visibility.public") }),
+                        /* @__PURE__ */ jsx(Select.Item, { value: "internal", children: t("categories.fields.visibility.internal") })
+                      ] })
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(Form.ErrorMessage, {})
+              ] });
+            }
+          }
+        )
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+      /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", children: t("actions.cancel") }) }),
+      /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: t("actions.save") })
+    ] }) })
+  ] }) });
+};
+
+// src/pages/categories/category-edit/category-edit.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var CategoryEdit = () => {
+  const { id } = useParams();
+  const { t } = useTranslation2();
+  const { product_category, isPending, isError, error } = useProductCategory(
+    id
+  );
+  const ready = !isPending && !!product_category;
+  if (isError) {
+    throw error;
+  }
+  return /* @__PURE__ */ jsxs2(RouteDrawer, { children: [
+    /* @__PURE__ */ jsxs2(RouteDrawer.Header, { children: [
+      /* @__PURE__ */ jsx2(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx2(Heading, { children: t("categories.edit.header") }) }),
+      /* @__PURE__ */ jsx2(RouteDrawer.Description, { className: "sr-only", children: t("categories.edit.description") })
+    ] }),
+    ready && /* @__PURE__ */ jsx2(EditCategoryForm, { category: product_category })
+  ] });
+};
+export {
+  CategoryEdit as Component
+};

package/dist/category-list-T4GPTLOA.js

@@ -0,0 +1,286 @@
+import {
+  useDeleteProductCategoryAction
+} from "./chunk-H22XDSXD.js";
+import {
+  getCategoryPath,
+  getIsActiveProps,
+  getIsInternalProps
+} from "./chunk-Y456KVIN.js";
+import {
+  TextCell,
+  TextHeader
+} from "./chunk-JHIMVLB2.js";
+import {
+  StatusCell
+} from "./chunk-DB6ANJBO.js";
+import "./chunk-FQERBIVS.js";
+import "./chunk-PHOCVOZ5.js";
+import {
+  _DataTable,
+  useDataTable
+} from "./chunk-FLCYR7E5.js";
+import "./chunk-YBZWO4ZV.js";
+import "./chunk-KAZ5BYTQ.js";
+import "./chunk-3EF54XFY.js";
+import "./chunk-KBYZLKI4.js";
+import "./chunk-YWWUOGJA.js";
+import {
+  SingleColumnPage
+} from "./chunk-U2UCL2VG.js";
+import "./chunk-INNFZYX2.js";
+import {
+  ActionMenu
+} from "./chunk-BDGZ4EQO.js";
+import "./chunk-LAVHRER2.js";
+import "./chunk-Y7QKP6QU.js";
+import {
+  useQueryParams
+} from "./chunk-THHRRYRS.js";
+import "./chunk-UZWFZMOX.js";
+import "./chunk-XQNVC4Q7.js";
+import {
+  useProductCategories
+} from "./chunk-XCMR2HTV.js";
+import "./chunk-T435NFHC.js";
+import "./chunk-2KCF3ZIB.js";
+import "./chunk-ZYNBKBY3.js";
+import "./chunk-NBMM2TZK.js";
+
+// src/pages/categories/category-list/components/category-list-table/category-list-table.tsx
+import { PencilSquare, Trash } from "@medusajs/icons";
+import { Button, Container, Heading, Text as Text2 } from "@medusajs/ui";
+import { keepPreviousData } from "@tanstack/react-query";
+import { createColumnHelper as createColumnHelper2 } from "@tanstack/react-table";
+import { useMemo as useMemo2 } from "react";
+import { useTranslation as useTranslation2 } from "react-i18next";
+import { Link } from "react-router-dom";
+
+// src/pages/categories/category-list/components/category-list-table/use-category-table-columns.tsx
+import { TriangleRightMini } from "@medusajs/icons";
+import { IconButton, Text, clx } from "@medusajs/ui";
+import { createColumnHelper } from "@tanstack/react-table";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { jsx, jsxs } from "react/jsx-runtime";
+var columnHelper = createColumnHelper();
+var useCategoryTableColumns = () => {
+  const { t } = useTranslation();
+  return useMemo(
+    () => [
+      columnHelper.accessor("name", {
+        header: () => /* @__PURE__ */ jsx(TextHeader, { text: t("fields.name") }),
+        cell: ({ getValue, row }) => {
+          const expandHandler = row.getToggleExpandedHandler();
+          if (row.original.parent_category !== void 0) {
+            const path = getCategoryPath(row.original);
+            return /* @__PURE__ */ jsx("div", { className: "flex size-full items-center gap-1 overflow-hidden", children: path.map((chip, index) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: clx("overflow-hidden", {
+                  "text-ui-fg-muted flex items-center gap-x-1": index !== path.length - 1
+                }),
+                children: [
+                  /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", className: "truncate", children: chip.name }),
+                  index !== path.length - 1 && /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: "/" })
+                ]
+              },
+              chip.id
+            )) });
+          }
+          return /* @__PURE__ */ jsxs("div", { className: "flex size-full items-center gap-x-3 overflow-hidden", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex size-7 items-center justify-center", children: row.getCanExpand() ? /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                type: "button",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                  expandHandler();
+                },
+                size: "small",
+                variant: "transparent",
+                className: "text-ui-fg-subtle",
+                children: /* @__PURE__ */ jsx(
+                  TriangleRightMini,
+                  {
+                    className: clx({
+                      "rotate-90 transition-transform will-change-transform": row.getIsExpanded()
+                    })
+                  }
+                )
+              }
+            ) : null }),
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: getValue() })
+          ] });
+        }
+      }),
+      columnHelper.accessor("handle", {
+        header: () => /* @__PURE__ */ jsx(TextHeader, { text: t("fields.handle") }),
+        cell: ({ getValue }) => {
+          return /* @__PURE__ */ jsx(TextCell, { text: `/${getValue()}` });
+        }
+      }),
+      columnHelper.accessor("is_active", {
+        header: () => /* @__PURE__ */ jsx(TextHeader, { text: t("fields.status") }),
+        cell: ({ getValue }) => {
+          const { color, label } = getIsActiveProps(getValue(), t);
+          return /* @__PURE__ */ jsx(StatusCell, { color, children: label });
+        }
+      }),
+      columnHelper.accessor("is_internal", {
+        header: () => /* @__PURE__ */ jsx(TextHeader, { text: t("categories.fields.visibility.label") }),
+        cell: ({ getValue }) => {
+          const { color, label } = getIsInternalProps(getValue(), t);
+          return /* @__PURE__ */ jsx(StatusCell, { color, children: label });
+        }
+      })
+    ],
+    [t]
+  );
+};
+
+// src/pages/categories/category-list/components/category-list-table/use-category-table-query.tsx
+var useCategoryTableQuery = ({
+  pageSize = 20,
+  prefix
+}) => {
+  const raw = useQueryParams(["q", "offset", "order"], prefix);
+  const searchParams = {
+    q: raw.q,
+    limit: pageSize,
+    offset: raw.offset ? Number(raw.offset) : 0,
+    order: raw.order
+  };
+  return {
+    raw,
+    searchParams
+  };
+};
+
+// src/pages/categories/category-list/components/category-list-table/category-list-table.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var PAGE_SIZE = 20;
+var CategoryListTable = () => {
+  const { t } = useTranslation2();
+  const { raw, searchParams } = useCategoryTableQuery({ pageSize: PAGE_SIZE });
+  const query = raw.q ? {
+    include_ancestors_tree: true,
+    fields: "id,name,handle,is_active,is_internal,parent_category",
+    ...searchParams
+  } : {
+    include_descendants_tree: true,
+    parent_category_id: "null",
+    fields: "id,name,category_children,handle,is_internal,is_active",
+    ...searchParams
+  };
+  const { product_categories, count, isLoading, isError, error } = useProductCategories(
+    {
+      ...query
+    },
+    {
+      placeholderData: keepPreviousData
+    }
+  );
+  const columns = useColumns();
+  const { table } = useDataTable({
+    data: product_categories || [],
+    columns,
+    count,
+    getRowId: (original) => original.id,
+    getSubRows: (original) => original.category_children,
+    enableExpandableRows: true,
+    pageSize: PAGE_SIZE
+  });
+  const showRankingAction = !!product_categories && product_categories.length > 0;
+  if (isError) {
+    throw error;
+  }
+  return /* @__PURE__ */ jsxs2(Container, { className: "divide-y p-0", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between px-6 py-4", children: [
+      /* @__PURE__ */ jsxs2("div", { children: [
+        /* @__PURE__ */ jsx2(Heading, { children: t("categories.domain") }),
+        /* @__PURE__ */ jsx2(Text2, { className: "text-ui-fg-subtle", size: "small", children: t("categories.subtitle") })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-x-2", children: [
+        showRankingAction && /* @__PURE__ */ jsx2(Button, { size: "small", variant: "secondary", asChild: true, children: /* @__PURE__ */ jsx2(Link, { to: "organize", children: t("categories.organize.action") }) }),
+        /* @__PURE__ */ jsx2(Button, { size: "small", variant: "secondary", asChild: true, children: /* @__PURE__ */ jsx2(Link, { to: "create", children: t("actions.create") }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx2(
+      _DataTable,
+      {
+        table,
+        columns,
+        count,
+        pageSize: PAGE_SIZE,
+        isLoading,
+        navigateTo: (row) => row.id,
+        queryObject: raw,
+        search: true,
+        pagination: true
+      }
+    )
+  ] });
+};
+var CategoryRowActions = ({
+  category
+}) => {
+  const { t } = useTranslation2();
+  const handleDelete = useDeleteProductCategoryAction(category);
+  return /* @__PURE__ */ jsx2(
+    ActionMenu,
+    {
+      groups: [
+        {
+          actions: [
+            {
+              label: t("actions.edit"),
+              icon: /* @__PURE__ */ jsx2(PencilSquare, {}),
+              to: `${category.id}/edit`
+            }
+          ]
+        },
+        {
+          actions: [
+            {
+              label: t("actions.delete"),
+              icon: /* @__PURE__ */ jsx2(Trash, {}),
+              onClick: handleDelete
+            }
+          ]
+        }
+      ]
+    }
+  );
+};
+var columnHelper2 = createColumnHelper2();
+var useColumns = () => {
+  const base = useCategoryTableColumns();
+  return useMemo2(
+    () => [
+      ...base,
+      columnHelper2.display({
+        id: "actions",
+        cell: ({ row }) => {
+          return /* @__PURE__ */ jsx2(CategoryRowActions, { category: row.original });
+        }
+      })
+    ],
+    [base]
+  );
+};
+
+// src/pages/categories/category-list/category-list.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var CategoryList = () => {
+  return /* @__PURE__ */ jsx3(
+    SingleColumnPage,
+    {
+      hasOutlet: true,
+      children: /* @__PURE__ */ jsx3(CategoryListTable, {})
+    }
+  );
+};
+export {
+  CategoryList as Component
+};

package/dist/category-organize-MLBY54BT.js

@@ -0,0 +1,110 @@
+import {
+  CategoryTree
+} from "./chunk-YXFG3M2D.js";
+import {
+  RouteFocusModal
+} from "./chunk-MWOKFNRO.js";
+import "./chunk-3QSRE5LS.js";
+import {
+  categoriesQueryKeys,
+  useProductCategories
+} from "./chunk-XCMR2HTV.js";
+import "./chunk-T435NFHC.js";
+import {
+  queryClient
+} from "./chunk-2KCF3ZIB.js";
+import {
+  sdk
+} from "./chunk-ZYNBKBY3.js";
+import "./chunk-NBMM2TZK.js";
+
+// src/pages/categories/category-organize/components/organize-category-form/organize-category-form.tsx
+import { useMutation } from "@tanstack/react-query";
+import { Spinner } from "@medusajs/icons";
+import { toast } from "@medusajs/ui";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var QUERY = {
+  fields: "id,name,parent_category_id,rank,*category_children",
+  parent_category_id: "null",
+  include_descendants_tree: true,
+  limit: 9999
+};
+var OrganizeCategoryForm = () => {
+  const {
+    product_categories,
+    isPending,
+    isError,
+    error: fetchError
+  } = useProductCategories(QUERY);
+  const [snapshot, setSnapshot] = useState([]);
+  const { mutateAsync, isPending: isMutating } = useMutation({
+    mutationFn: async ({
+      value
+    }) => {
+      await sdk.admin.productCategory.update(value.id, {
+        rank: value.rank ?? 0,
+        parent_category_id: value.parent_category_id
+      });
+    },
+    onMutate: async (update) => {
+      await queryClient.cancelQueries({
+        queryKey: categoriesQueryKeys.list(QUERY)
+      });
+      const previousValue = queryClient.getQueryData(categoriesQueryKeys.list(QUERY));
+      const nextValue = {
+        ...previousValue,
+        product_categories: update.arr
+      };
+      queryClient.setQueryData(categoriesQueryKeys.list(QUERY), nextValue);
+      return {
+        previousValue
+      };
+    },
+    onError: (error, _newValue, context) => {
+      queryClient.setQueryData(
+        categoriesQueryKeys.list(QUERY),
+        context?.previousValue
+      );
+      toast.error(error.message);
+    },
+    onSettled: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: categoriesQueryKeys.all
+      });
+    }
+  });
+  const handleRankChange = async (value, arr) => {
+    const val = {
+      id: value.id,
+      parent_category_id: value.parentId,
+      rank: value.index
+    };
+    setSnapshot(arr);
+    await mutateAsync({ value: val, arr });
+  };
+  const loading = isPending || isMutating;
+  if (isError) {
+    throw fetchError;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsx(RouteFocusModal.Header, { children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end", children: loading && /* @__PURE__ */ jsx(Spinner, { className: "animate-spin" }) }) }),
+    /* @__PURE__ */ jsx(RouteFocusModal.Body, { className: "bg-ui-bg-subtle flex flex-1 flex-col overflow-y-auto", children: /* @__PURE__ */ jsx(
+      CategoryTree,
+      {
+        renderValue: (item) => item.name,
+        value: loading ? snapshot : product_categories || [],
+        onChange: handleRankChange
+      }
+    ) })
+  ] });
+};
+
+// src/pages/categories/category-organize/category-organize.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var CategoryOrganize = () => {
+  return /* @__PURE__ */ jsx2(RouteFocusModal, { children: /* @__PURE__ */ jsx2(OrganizeCategoryForm, {}) });
+};
+export {
+  CategoryOrganize as Component
+};