@mercurjs/admin 2.0.0-canary.24

package/dist/category-create-DRJZI3EM.js

@@ -0,0 +1,427 @@
+import {
+  CategoryTree
+} from "./chunk-YXFG3M2D.js";
+import {
+  insertCategoryTreeItem
+} from "./chunk-Y456KVIN.js";
+import {
+  transformNullableFormData
+} from "./chunk-7RPRNVBS.js";
+import {
+  HandleInput
+} from "./chunk-TLE6YHGH.js";
+import "./chunk-SMQT3ZNO.js";
+import "./chunk-TKGWSUEI.js";
+import {
+  KeyboundForm
+} from "./chunk-U2ZFCAPX.js";
+import {
+  RouteFocusModal,
+  useRouteModal
+} from "./chunk-MWOKFNRO.js";
+import {
+  Form
+} from "./chunk-3QSRE5LS.js";
+import {
+  useDocumentDirection
+} from "./chunk-Y7QKP6QU.js";
+import {
+  useCreateProductCategory,
+  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-create/category-create.tsx
+import { useSearchParams } from "react-router-dom";
+
+// src/pages/categories/category-create/components/create-category-form/create-category-form.tsx
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Button, ProgressTabs, toast } from "@medusajs/ui";
+import { useForm } from "react-hook-form";
+import { useTranslation as useTranslation3 } from "react-i18next";
+import { useState as useState2 } from "react";
+
+// src/pages/categories/category-create/components/create-category-form/create-category-details.tsx
+import { Heading, Input, Select, Text, Textarea } from "@medusajs/ui";
+import { useTranslation } from "react-i18next";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CreateCategoryDetails = ({ form }) => {
+  const { t } = useTranslation();
+  const direction = useDocumentDirection();
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center p-16", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full max-w-[720px] flex-col gap-y-8", "data-testid": "category-create-form-content", children: [
+    /* @__PURE__ */ jsxs("div", { "data-testid": "category-create-form-header", children: [
+      /* @__PURE__ */ jsx(Heading, { "data-testid": "category-create-form-heading", children: t("categories.create.header") }),
+      /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle", "data-testid": "category-create-form-hint", children: t("categories.create.hint") })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [
+      /* @__PURE__ */ jsx(
+        Form.Field,
+        {
+          control: form.control,
+          name: "name",
+          render: ({ field }) => {
+            return /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "category-create-form-name-item", children: [
+              /* @__PURE__ */ jsx(Form.Label, { "data-testid": "category-create-form-name-label", children: t("fields.title") }),
+              /* @__PURE__ */ jsx(Form.Control, { "data-testid": "category-create-form-name-control", children: /* @__PURE__ */ jsx(Input, { autoComplete: "off", ...field, "data-testid": "category-create-form-name-input" }) }),
+              /* @__PURE__ */ jsx(Form.ErrorMessage, { "data-testid": "category-create-form-name-error" })
+            ] });
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Form.Field,
+        {
+          control: form.control,
+          name: "handle",
+          render: ({ field }) => {
+            return /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "category-create-form-handle-item", children: [
+              /* @__PURE__ */ jsx(Form.Label, { optional: true, tooltip: t("collections.handleTooltip"), "data-testid": "category-create-form-handle-label", children: t("fields.handle") }),
+              /* @__PURE__ */ jsx(Form.Control, { "data-testid": "category-create-form-handle-control", children: /* @__PURE__ */ jsx(HandleInput, { ...field, "data-testid": "category-create-form-handle-input" }) }),
+              /* @__PURE__ */ jsx(Form.ErrorMessage, { "data-testid": "category-create-form-handle-error" })
+            ] });
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      Form.Field,
+      {
+        control: form.control,
+        name: "description",
+        render: ({ field }) => {
+          return /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "category-create-form-description-item", children: [
+            /* @__PURE__ */ jsx(Form.Label, { optional: true, "data-testid": "category-create-form-description-label", children: t("fields.description") }),
+            /* @__PURE__ */ jsx(Form.Control, { "data-testid": "category-create-form-description-control", children: /* @__PURE__ */ jsx(Textarea, { ...field, "data-testid": "category-create-form-description-textarea" }) }),
+            /* @__PURE__ */ jsx(Form.ErrorMessage, { "data-testid": "category-create-form-description-error" })
+          ] });
+        }
+      }
+    ),
+    /* @__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, { "data-testid": "category-create-form-status-item", children: [
+              /* @__PURE__ */ jsx(Form.Label, { "data-testid": "category-create-form-status-label", children: t("categories.fields.status.label") }),
+              /* @__PURE__ */ jsx(Form.Control, { "data-testid": "category-create-form-status-control", children: /* @__PURE__ */ jsxs(
+                Select,
+                {
+                  dir: direction,
+                  ...field,
+                  onValueChange: onChange,
+                  "data-testid": "category-create-form-status-select",
+                  children: [
+                    /* @__PURE__ */ jsx(Select.Trigger, { ref, "data-testid": "category-create-form-status-select-trigger", children: /* @__PURE__ */ jsx(Select.Value, { "data-testid": "category-create-form-status-select-value" }) }),
+                    /* @__PURE__ */ jsxs(Select.Content, { "data-testid": "category-create-form-status-select-content", children: [
+                      /* @__PURE__ */ jsx(Select.Item, { value: "active", "data-testid": "category-create-form-status-select-option-active", children: t("categories.fields.status.active") }),
+                      /* @__PURE__ */ jsx(Select.Item, { value: "inactive", "data-testid": "category-create-form-status-select-option-inactive", children: t("categories.fields.status.inactive") })
+                    ] })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Form.ErrorMessage, { "data-testid": "category-create-form-status-error" })
+            ] });
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Form.Field,
+        {
+          control: form.control,
+          name: "visibility",
+          render: ({ field: { ref, onChange, ...field } }) => {
+            return /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "category-create-form-visibility-item", children: [
+              /* @__PURE__ */ jsx(Form.Label, { "data-testid": "category-create-form-visibility-label", children: t("categories.fields.visibility.label") }),
+              /* @__PURE__ */ jsx(Form.Control, { "data-testid": "category-create-form-visibility-control", children: /* @__PURE__ */ jsxs(
+                Select,
+                {
+                  dir: direction,
+                  ...field,
+                  onValueChange: onChange,
+                  "data-testid": "category-create-form-visibility-select",
+                  children: [
+                    /* @__PURE__ */ jsx(Select.Trigger, { ref, "data-testid": "category-create-form-visibility-select-trigger", children: /* @__PURE__ */ jsx(Select.Value, { "data-testid": "category-create-form-visibility-select-value" }) }),
+                    /* @__PURE__ */ jsxs(Select.Content, { "data-testid": "category-create-form-visibility-select-content", children: [
+                      /* @__PURE__ */ jsx(Select.Item, { value: "public", "data-testid": "category-create-form-visibility-select-option-public", children: t("categories.fields.visibility.public") }),
+                      /* @__PURE__ */ jsx(Select.Item, { value: "internal", "data-testid": "category-create-form-visibility-select-option-internal", children: t("categories.fields.visibility.internal") })
+                    ] })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Form.ErrorMessage, { "data-testid": "category-create-form-visibility-error" })
+            ] });
+          }
+        }
+      )
+    ] })
+  ] }) });
+};
+
+// src/pages/categories/category-create/components/create-category-form/create-category-nesting.tsx
+import { Badge } from "@medusajs/ui";
+import { useMemo, useState } from "react";
+import { useWatch } from "react-hook-form";
+import { useTranslation as useTranslation2 } from "react-i18next";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var ID = "new-item";
+var CreateCategoryNesting = ({
+  form,
+  shouldFreeze
+}) => {
+  const { t } = useTranslation2();
+  const [snapshot, setSnapshot] = useState([]);
+  const { product_categories, isPending, isError, error } = useProductCategories({
+    parent_category_id: "null",
+    limit: 9999,
+    fields: "id,name,parent_category_id,rank,category_children,rank",
+    include_descendants_tree: true
+  });
+  const parentCategoryId = useWatch({
+    control: form.control,
+    name: "parent_category_id"
+  });
+  const watchedRank = useWatch({
+    control: form.control,
+    name: "rank"
+  });
+  const watchedName = useWatch({
+    control: form.control,
+    name: "name"
+  });
+  const value = useMemo(() => {
+    const temp = {
+      id: ID,
+      name: watchedName,
+      parent_category_id: parentCategoryId,
+      rank: watchedRank,
+      category_children: null
+    };
+    return insertCategoryTreeItem(product_categories ?? [], temp);
+  }, [product_categories, watchedName, parentCategoryId, watchedRank]);
+  const handleChange = ({
+    parentId,
+    index
+  }, list) => {
+    form.setValue("parent_category_id", parentId, {
+      shouldDirty: true,
+      shouldTouch: true
+    });
+    form.setValue("rank", index, {
+      shouldDirty: true,
+      shouldTouch: true
+    });
+    setSnapshot(list);
+  };
+  if (isError) {
+    throw error;
+  }
+  const ready = !isPending && !!product_categories;
+  return /* @__PURE__ */ jsx2("div", { "data-testid": "category-create-form-nesting", children: /* @__PURE__ */ jsx2(
+    CategoryTree,
+    {
+      value: shouldFreeze ? snapshot : value,
+      enableDrag: (item) => item.id === ID,
+      onChange: handleChange,
+      renderValue: (item) => {
+        if (item.id === ID) {
+          return /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-x-3", "data-testid": "category-create-form-nesting-new-item", children: [
+            /* @__PURE__ */ jsx2("span", { children: item.name }),
+            /* @__PURE__ */ jsx2(Badge, { size: "2xsmall", color: "blue", "data-testid": "category-create-form-nesting-new-badge", children: t("categories.fields.new.label") })
+          ] });
+        }
+        return item.name;
+      },
+      isLoading: !ready
+    }
+  ) });
+};
+
+// src/pages/categories/category-create/components/create-category-form/schema.ts
+import { z } from "zod";
+var CreateCategoryDetailsSchema = z.object({
+  name: z.string().min(1),
+  description: z.string().optional(),
+  handle: z.string().optional(),
+  status: z.enum(["active", "inactive"]),
+  visibility: z.enum(["public", "internal"])
+});
+var CreateCategorySchema = z.object({
+  rank: z.number().nullable(),
+  parent_category_id: z.string().nullable()
+}).merge(CreateCategoryDetailsSchema);
+
+// src/pages/categories/category-create/components/create-category-form/create-category-form.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var CreateCategoryForm = ({
+  parentCategoryId
+}) => {
+  const { t } = useTranslation3();
+  const { handleSuccess } = useRouteModal();
+  const direction = useDocumentDirection();
+  const [activeTab, setActiveTab] = useState2("details" /* DETAILS */);
+  const [validDetails, setValidDetails] = useState2(false);
+  const [shouldFreeze, setShouldFreeze] = useState2(false);
+  const form = useForm({
+    defaultValues: {
+      name: "",
+      description: "",
+      handle: "",
+      status: "active",
+      visibility: "public",
+      rank: parentCategoryId ? 0 : null,
+      parent_category_id: parentCategoryId
+    },
+    resolver: zodResolver(CreateCategorySchema)
+  });
+  const handleTabChange = (tab) => {
+    if (tab === "organize" /* ORGANIZE */) {
+      const { name, handle, description, status, visibility } = form.getValues();
+      const result = CreateCategoryDetailsSchema.safeParse({
+        name,
+        handle,
+        description,
+        status,
+        visibility
+      });
+      if (!result.success) {
+        result.error.errors.forEach((error) => {
+          form.setError(error.path.join("."), {
+            type: "manual",
+            message: error.message
+          });
+        });
+        return;
+      }
+      form.clearErrors();
+      setValidDetails(true);
+    }
+    setActiveTab(tab);
+  };
+  const { mutateAsync, isPending } = useCreateProductCategory();
+  const handleSubmit = form.handleSubmit((data) => {
+    const { visibility, status, parent_category_id, rank, name, ...rest } = data;
+    const parsedData = transformNullableFormData(rest, false);
+    setShouldFreeze(true);
+    mutateAsync(
+      {
+        name,
+        ...parsedData,
+        parent_category_id: parent_category_id ?? void 0,
+        rank: rank ?? void 0,
+        is_active: status === "active",
+        is_internal: visibility === "internal"
+      },
+      {
+        onSuccess: ({ product_category }) => {
+          toast.success(
+            t("categories.create.successToast", {
+              name: product_category.name
+            })
+          );
+          handleSuccess(`/categories/${product_category.id}`);
+        },
+        onError: (error) => {
+          toast.error(error.message);
+          setShouldFreeze(false);
+        }
+      }
+    );
+  });
+  const nestingStatus = form.getFieldState("parent_category_id")?.isDirty || form.getFieldState("rank")?.isDirty || activeTab === "organize" /* ORGANIZE */ ? "in-progress" : "not-started";
+  const detailsStatus = validDetails ? "completed" : "in-progress";
+  return /* @__PURE__ */ jsx3(RouteFocusModal.Form, { form, "data-testid": "category-create-form", children: /* @__PURE__ */ jsx3(
+    KeyboundForm,
+    {
+      onSubmit: handleSubmit,
+      className: "flex size-full flex-col overflow-hidden",
+      children: /* @__PURE__ */ jsxs3(
+        ProgressTabs,
+        {
+          dir: direction,
+          value: activeTab,
+          onValueChange: (tab) => handleTabChange(tab),
+          className: "flex size-full flex-col",
+          children: [
+            /* @__PURE__ */ jsx3(RouteFocusModal.Header, { "data-testid": "category-create-form-header", children: /* @__PURE__ */ jsx3("div", { className: "flex w-full items-center justify-between", children: /* @__PURE__ */ jsx3("div", { className: "-my-2 w-full max-w-[400px] border-l", children: /* @__PURE__ */ jsxs3(ProgressTabs.List, { className: "grid w-full grid-cols-2", "data-testid": "category-create-form-tabs-list", children: [
+              /* @__PURE__ */ jsx3(
+                ProgressTabs.Trigger,
+                {
+                  value: "details" /* DETAILS */,
+                  status: detailsStatus,
+                  className: "w-full min-w-0 overflow-hidden",
+                  "data-testid": "category-create-form-tab-details",
+                  children: /* @__PURE__ */ jsx3("span", { className: "truncate", children: t("categories.create.tabs.details") })
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                ProgressTabs.Trigger,
+                {
+                  value: "organize" /* ORGANIZE */,
+                  status: nestingStatus,
+                  className: "w-full min-w-0 overflow-hidden",
+                  "data-testid": "category-create-form-tab-organize",
+                  children: /* @__PURE__ */ jsx3("span", { className: "truncate", children: t("categories.create.tabs.organize") })
+                }
+              )
+            ] }) }) }) }),
+            /* @__PURE__ */ jsxs3(RouteFocusModal.Body, { className: "flex size-full flex-col overflow-auto", "data-testid": "category-create-form-body", children: [
+              /* @__PURE__ */ jsx3(ProgressTabs.Content, { value: "details" /* DETAILS */, "data-testid": "category-create-form-tab-details-content", children: /* @__PURE__ */ jsx3(CreateCategoryDetails, { form }) }),
+              /* @__PURE__ */ jsx3(
+                ProgressTabs.Content,
+                {
+                  value: "organize" /* ORGANIZE */,
+                  className: "bg-ui-bg-subtle flex-1",
+                  "data-testid": "category-create-form-tab-organize-content",
+                  children: /* @__PURE__ */ jsx3(CreateCategoryNesting, { form, shouldFreeze })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx3(RouteFocusModal.Footer, { "data-testid": "category-create-form-footer", children: /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-end gap-x-2", children: [
+              /* @__PURE__ */ jsx3(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx3(Button, { size: "small", variant: "secondary", "data-testid": "category-create-form-cancel-button", children: t("actions.cancel") }) }),
+              activeTab === "organize" /* ORGANIZE */ ? /* @__PURE__ */ jsx3(
+                Button,
+                {
+                  size: "small",
+                  variant: "primary",
+                  type: "submit",
+                  isLoading: isPending,
+                  "data-testid": "category-create-form-save-button",
+                  children: t("actions.save")
+                },
+                "submit-btn"
+              ) : /* @__PURE__ */ jsx3(
+                Button,
+                {
+                  size: "small",
+                  variant: "primary",
+                  type: "button",
+                  onClick: () => handleTabChange("organize" /* ORGANIZE */),
+                  "data-testid": "category-create-form-continue-button",
+                  children: t("actions.continue")
+                },
+                "continue-btn"
+              )
+            ] }) })
+          ]
+        }
+      )
+    }
+  ) });
+};
+
+// src/pages/categories/category-create/category-create.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var CategoryCreate = () => {
+  const [searchParams] = useSearchParams();
+  const parentCategoryId = searchParams.get("parent_category_id");
+  return /* @__PURE__ */ jsx4(RouteFocusModal, { children: /* @__PURE__ */ jsx4(CreateCategoryForm, { parentCategoryId }) });
+};
+export {
+  CategoryCreate as Component
+};