@mercurjs/admin 2.0.0 → 2.0.2

package/dist/attribute-edit-6YNHG3QV.js

@@ -0,0 +1,281 @@
+import {
+  AttributeUIComponent,
+  UpdateAttributeSchema
+} from "./chunk-4ZTZTIIM.js";
+import {
+  ATTRIBUTE_DETAIL_FIELDS
+} from "./chunk-LO7XX5M7.js";
+import {
+  HandleInput
+} from "./chunk-TLE6YHGH.js";
+import {
+  Combobox
+} from "./chunk-AW77UWCZ.js";
+import "./chunk-TKGWSUEI.js";
+import {
+  KeyboundForm
+} from "./chunk-U2ZFCAPX.js";
+import {
+  RouteDrawer,
+  useRouteModal
+} from "./chunk-OV7R2AH5.js";
+import {
+  Form
+} from "./chunk-3QSRE5LS.js";
+import "./chunk-3MDRW5MA.js";
+import "./chunk-MFL2TZ3W.js";
+import "./chunk-YNIIYGL4.js";
+import "./chunk-CBHNHLUZ.js";
+import "./chunk-VME3CJER.js";
+import {
+  useAttribute,
+  useUpdateAttribute
+} from "./chunk-XMVTX2EN.js";
+import "./chunk-5PUHROK4.js";
+import "./chunk-TPPONKYW.js";
+import "./chunk-DF3OGJAK.js";
+import "./chunk-XRDP2SYY.js";
+import "./chunk-FNBKEF54.js";
+import "./chunk-EHQESDH2.js";
+import "./chunk-XKVXLDSJ.js";
+import "./chunk-XDZGOUCR.js";
+import "./chunk-K4BGK3CO.js";
+import "./chunk-YYTI5JIC.js";
+import "./chunk-HAFZQK53.js";
+import "./chunk-IJWG755C.js";
+import "./chunk-M3YP3NX4.js";
+import "./chunk-UU2RQMXS.js";
+import "./chunk-O4STPJR2.js";
+import "./chunk-R74OHYTB.js";
+import "./chunk-22XJUSMM.js";
+import "./chunk-OFKUNYQJ.js";
+import "./chunk-W5UPPL3W.js";
+import "./chunk-LC6TM5OT.js";
+import "./chunk-7SJC6BWZ.js";
+import "./chunk-N4JU7GWK.js";
+import {
+  useProductCategories
+} from "./chunk-52BRBQMY.js";
+import "./chunk-BA2HXHTW.js";
+import "./chunk-RHKRREUU.js";
+import "./chunk-ZA2KFUFR.js";
+import "./chunk-RIN4CBRB.js";
+import "./chunk-NBMM2TZK.js";
+
+// src/pages/attributes/attribute-edit/attribute-edit.tsx
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Button, Input, Select, Switch, Text, Textarea, toast } from "@medusajs/ui";
+import { Heading } from "@medusajs/ui";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { useParams } from "react-router-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+var UI_COMPONENT_LABELS = {
+  select: "Single Select",
+  multivalue: "Multi Select",
+  unit: "Unit",
+  toggle: "Toggle",
+  text_area: "Text"
+};
+var AttributeEditForm = ({ attribute }) => {
+  const { t } = useTranslation();
+  const { handleSuccess } = useRouteModal();
+  const { product_categories: allCategories } = useProductCategories({
+    limit: 999
+  });
+  const categoryOptions = (allCategories ?? []).map((cat) => ({
+    label: cat.name,
+    value: cat.id
+  }));
+  const form = useForm({
+    resolver: zodResolver(UpdateAttributeSchema),
+    defaultValues: {
+      name: attribute.name ?? "",
+      handle: attribute.handle ?? "",
+      description: attribute.description ?? "",
+      is_filterable: attribute.is_filterable ?? false,
+      is_required: attribute.is_required ?? false,
+      ui_component: attribute.ui_component ?? "select",
+      product_category_ids: (attribute.product_categories ?? []).map(
+        (cat) => cat.id
+      )
+    }
+  });
+  const { mutateAsync, isPending: isMutating } = useUpdateAttribute(attribute.id);
+  const handleSubmit = form.handleSubmit(async (data) => {
+    await mutateAsync(data, {
+      onSuccess: () => {
+        toast.success(
+          t("attributes.edit.successToast", { name: data.name || attribute.name })
+        );
+        handleSuccess();
+      },
+      onError: (err) => {
+        toast.error(err.message);
+      }
+    });
+  });
+  return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, "data-testid": "attribute-edit-form", children: /* @__PURE__ */ jsxs(
+    KeyboundForm,
+    {
+      className: "flex size-full flex-col overflow-hidden",
+      onSubmit: handleSubmit,
+      children: [
+        /* @__PURE__ */ jsxs(
+          RouteDrawer.Body,
+          {
+            className: "flex flex-1 flex-col gap-y-6 overflow-auto",
+            "data-testid": "attribute-edit-form-body",
+            children: [
+              /* @__PURE__ */ jsx(
+                Form.Field,
+                {
+                  control: form.control,
+                  name: "name",
+                  render: ({ field }) => /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "attribute-edit-name-field", children: [
+                    /* @__PURE__ */ jsx(Form.Label, { children: t("attributes.fields.name") }),
+                    /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(Input, { ...field, size: "small" }) }),
+                    /* @__PURE__ */ jsx(Form.ErrorMessage, {})
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Form.Field,
+                {
+                  control: form.control,
+                  name: "handle",
+                  render: ({ field }) => /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "attribute-edit-handle-field", children: [
+                    /* @__PURE__ */ jsx(Form.Label, { optional: true, children: t("attributes.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 }) => /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "attribute-edit-description-field", children: [
+                    /* @__PURE__ */ jsx(Form.Label, { optional: true, children: t("attributes.fields.description") }),
+                    /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(Textarea, { ...field }) }),
+                    /* @__PURE__ */ jsx(Form.ErrorMessage, {})
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Form.Field,
+                {
+                  control: form.control,
+                  name: "ui_component",
+                  render: ({ field }) => /* @__PURE__ */ jsxs(Form.Item, { "data-testid": "attribute-edit-ui-component-field", children: [
+                    /* @__PURE__ */ jsx(Form.Label, { children: t("attributes.fields.type") }),
+                    /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsxs(
+                      Select,
+                      {
+                        value: field.value,
+                        onValueChange: field.onChange,
+                        children: [
+                          /* @__PURE__ */ jsx(Select.Trigger, { children: /* @__PURE__ */ jsx(Select.Value, {}) }),
+                          /* @__PURE__ */ jsx(Select.Content, { children: Object.values(AttributeUIComponent).map((component) => /* @__PURE__ */ jsx(Select.Item, { value: component, children: UI_COMPONENT_LABELS[component] ?? component }, component)) })
+                        ]
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(Form.ErrorMessage, {})
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Form.Field,
+                {
+                  control: form.control,
+                  name: "is_filterable",
+                  render: ({ field }) => /* @__PURE__ */ jsx(Form.Item, { "data-testid": "attribute-edit-filterable-field", children: /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-ui-bg-component p-4 shadow-elevation-card-rest", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+                    /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(
+                      Switch,
+                      {
+                        checked: field.value,
+                        onCheckedChange: field.onChange,
+                        className: "mt-1"
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx(Form.Label, { children: t("attributes.fields.filterable") }),
+                      /* @__PURE__ */ jsx(Text, { className: "mt-1 text-xs text-ui-fg-subtle", children: t("attributes.hints.filterable", "If checked, buyers will be able to filter products using this attribute.") })
+                    ] })
+                  ] }) }) })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Form.Field,
+                {
+                  control: form.control,
+                  name: "is_required",
+                  render: ({ field }) => /* @__PURE__ */ jsx(Form.Item, { "data-testid": "attribute-edit-required-field", children: /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-ui-bg-component p-4 shadow-elevation-card-rest", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+                    /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(
+                      Switch,
+                      {
+                        checked: field.value,
+                        onCheckedChange: field.onChange,
+                        className: "mt-1"
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx(Form.Label, { children: t("attributes.fields.required") }),
+                      /* @__PURE__ */ jsx(Text, { className: "mt-1 text-xs text-ui-fg-subtle", children: t("attributes.hints.required", "If checked, vendors must set a value for this attribute.") })
+                    ] })
+                  ] }) }) })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Form.Field,
+                {
+                  control: form.control,
+                  name: "product_category_ids",
+                  render: ({ field }) => /* @__PURE__ */ jsxs(Form.Item, { children: [
+                    /* @__PURE__ */ jsx(Form.Label, { optional: true, children: t("attributes.fields.category") }),
+                    /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(
+                      Combobox,
+                      {
+                        options: categoryOptions,
+                        ...field,
+                        value: field.value ?? []
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(Form.ErrorMessage, {})
+                  ] })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(RouteDrawer.Footer, { "data-testid": "attribute-edit-form-footer", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
+          /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "small", type: "button", children: t("actions.cancel") }) }),
+          /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isMutating, children: t("actions.save") })
+        ] }) })
+      ]
+    }
+  ) });
+};
+var AttributeEdit = () => {
+  const { id } = useParams();
+  const { attribute, isPending, isError, error } = useAttribute(id, {
+    fields: ATTRIBUTE_DETAIL_FIELDS
+  });
+  if (isError) {
+    throw error;
+  }
+  if (isPending || !attribute) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(RouteDrawer, { "data-testid": "attribute-edit-drawer", children: [
+    /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
+      /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: attribute.name }) }),
+      /* @__PURE__ */ jsx(RouteDrawer.Description, { className: "sr-only", children: "Edit attribute" })
+    ] }),
+    /* @__PURE__ */ jsx(AttributeEditForm, { attribute })
+  ] });
+};
+export {
+  AttributeEdit as Component
+};

package/dist/attribute-edit-possible-value-IBJA53MJ.js

@@ -0,0 +1,264 @@
+import {
+  UpdatePossibleValueSchema
+} from "./chunk-4ZTZTIIM.js";
+import {
+  ATTRIBUTE_DETAIL_FIELDS
+} from "./chunk-LO7XX5M7.js";
+import "./chunk-TKGWSUEI.js";
+import {
+  KeyboundForm
+} from "./chunk-U2ZFCAPX.js";
+import {
+  ActionMenu
+} from "./chunk-BDGZ4EQO.js";
+import "./chunk-LAVHRER2.js";
+import "./chunk-Y7QKP6QU.js";
+import {
+  RouteDrawer,
+  useRouteModal
+} from "./chunk-OV7R2AH5.js";
+import {
+  Form
+} from "./chunk-3QSRE5LS.js";
+import {
+  useAttribute,
+  useUpdateAttributePossibleValue
+} from "./chunk-XMVTX2EN.js";
+import "./chunk-RHKRREUU.js";
+import "./chunk-ZA2KFUFR.js";
+import "./chunk-RIN4CBRB.js";
+import "./chunk-NBMM2TZK.js";
+
+// src/pages/attributes/attribute-edit-possible-value/attribute-edit-possible-value.tsx
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Button, Heading, Input, Text, toast } from "@medusajs/ui";
+import { useEffect, useRef } from "react";
+import { useFieldArray, useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { useParams, useSearchParams } from "react-router-dom";
+import { Trash } from "@medusajs/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+var EditPossibleValueForm = ({
+  attributeId,
+  possibleValue
+}) => {
+  const { t } = useTranslation();
+  const { handleSuccess } = useRouteModal();
+  const originalMetadataRef = useRef({});
+  const { mutateAsync, isPending: isMutating } = useUpdateAttributePossibleValue(attributeId, possibleValue.id);
+  const form = useForm({
+    resolver: zodResolver(UpdatePossibleValueSchema),
+    defaultValues: {
+      value: "",
+      rank: void 0,
+      metadata: []
+    }
+  });
+  const { fields, append, remove } = useFieldArray({
+    control: form.control,
+    name: "metadata"
+  });
+  useEffect(() => {
+    if (possibleValue) {
+      const originalMetadata = possibleValue.metadata || {};
+      originalMetadataRef.current = originalMetadata;
+      const metadataArray = Object.entries(originalMetadata).map(
+        ([key, value]) => ({ key, value: String(value) })
+      );
+      form.reset({
+        value: possibleValue.value,
+        rank: possibleValue.rank,
+        metadata: metadataArray.length > 0 ? metadataArray : [{ key: "", value: "" }]
+      });
+    }
+  }, [possibleValue, form]);
+  const handleSubmit = form.handleSubmit(async (data) => {
+    const transformedMetadata = data.metadata.reduce(
+      (acc, item) => {
+        if (item.key.trim() !== "" && item.value.trim() !== "") {
+          acc[item.key] = item.value;
+        }
+        return acc;
+      },
+      {}
+    );
+    const finalMetadata = { ...transformedMetadata };
+    const originalKeys = Object.keys(originalMetadataRef.current);
+    const newKeys = Object.keys(transformedMetadata);
+    originalKeys.forEach((key) => {
+      if (!newKeys.includes(key)) {
+        finalMetadata[key] = "";
+      }
+    });
+    await mutateAsync(
+      {
+        value: data.value,
+        rank: data.rank,
+        metadata: finalMetadata
+      },
+      {
+        onSuccess: () => {
+          toast.success(
+            t("attributes.editPossibleValue.successToast", {
+              value: data.value
+            })
+          );
+          handleSuccess();
+        },
+        onError: (err) => {
+          toast.error(err.message);
+        }
+      }
+    );
+  });
+  return /* @__PURE__ */ jsx(RouteDrawer.Form, { form, "data-testid": "attribute-edit-possible-value-form", children: /* @__PURE__ */ jsxs(
+    KeyboundForm,
+    {
+      className: "flex size-full flex-col overflow-hidden",
+      onSubmit: handleSubmit,
+      children: [
+        /* @__PURE__ */ jsxs(
+          RouteDrawer.Body,
+          {
+            className: "flex flex-1 flex-col gap-y-6 overflow-auto",
+            "data-testid": "attribute-edit-possible-value-form-body",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+                /* @__PURE__ */ jsx(
+                  Form.Field,
+                  {
+                    control: form.control,
+                    name: "value",
+                    render: ({ field }) => /* @__PURE__ */ jsxs(Form.Item, { children: [
+                      /* @__PURE__ */ jsx(Form.Label, { children: t("attributes.fields.value") }),
+                      /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(Input, { ...field }) }),
+                      /* @__PURE__ */ jsx(Form.ErrorMessage, {})
+                    ] })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Form.Field,
+                  {
+                    control: form.control,
+                    name: "rank",
+                    render: ({ field }) => /* @__PURE__ */ jsxs(Form.Item, { children: [
+                      /* @__PURE__ */ jsx(Form.Label, { optional: true, children: t("attributes.fields.rank") }),
+                      /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(
+                        Input,
+                        {
+                          ...field,
+                          type: "number",
+                          value: field.value ?? "",
+                          onChange: (e) => field.onChange(
+                            e.target.value === "" ? void 0 : Number(e.target.value)
+                          )
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx(Form.ErrorMessage, {})
+                    ] })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", className: "mb-2", children: t("attributes.fields.metadata") }),
+                /* @__PURE__ */ jsxs("table", { className: "w-full overflow-hidden rounded-lg border-separate border-spacing-0 border", children: [
+                  /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "bg-ui-bg-subtle", children: [
+                    /* @__PURE__ */ jsx("th", { className: "border-b border-r px-3 py-2 text-left", children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: t("fields.key") }) }),
+                    /* @__PURE__ */ jsx("th", { className: "border-b px-3 py-2 text-left", children: /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", children: t("attributes.fields.value") }) }),
+                    /* @__PURE__ */ jsx("th", { className: "w-10 border-b" })
+                  ] }) }),
+                  /* @__PURE__ */ jsx("tbody", { children: fields.map((field, index) => /* @__PURE__ */ jsxs("tr", { className: "border-b last:border-b-0", children: [
+                    /* @__PURE__ */ jsx("td", { className: "border-r px-3 py-2", children: /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        placeholder: "Key",
+                        className: "w-full bg-transparent text-sm outline-none",
+                        ...form.register(`metadata.${index}.key`)
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx("td", { className: "px-3 py-2", children: /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        placeholder: "Value",
+                        className: "w-full bg-transparent text-sm outline-none",
+                        ...form.register(`metadata.${index}.value`)
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx("td", { className: "px-1", children: /* @__PURE__ */ jsx(
+                      ActionMenu,
+                      {
+                        groups: [
+                          {
+                            actions: [
+                              {
+                                label: t("actions.delete"),
+                                onClick: () => remove(index),
+                                icon: /* @__PURE__ */ jsx(Trash, {})
+                              }
+                            ]
+                          }
+                        ]
+                      }
+                    ) })
+                  ] }, field.id)) }),
+                  /* @__PURE__ */ jsx("tfoot", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: 3, className: "border-t p-3", children: /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      type: "button",
+                      variant: "secondary",
+                      size: "small",
+                      className: "w-full",
+                      onClick: () => append({ key: "", value: "" }),
+                      children: "+ Add Row"
+                    }
+                  ) }) }) })
+                ] })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(RouteDrawer.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
+          /* @__PURE__ */ jsx(RouteDrawer.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "small", type: "button", children: t("actions.cancel") }) }),
+          /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isMutating, children: t("actions.save") })
+        ] }) })
+      ]
+    }
+  ) });
+};
+var AttributeEditPossibleValue = () => {
+  const { id } = useParams();
+  const [searchParams] = useSearchParams();
+  const { t } = useTranslation();
+  const possibleValueId = searchParams.get("possible_value_id");
+  const { attribute, isPending, isError, error } = useAttribute(id, {
+    fields: ATTRIBUTE_DETAIL_FIELDS
+  });
+  if (isError) {
+    throw error;
+  }
+  if (isPending || !attribute) {
+    return null;
+  }
+  const possibleValue = attribute.possible_values?.find(
+    (pv) => pv.id === possibleValueId
+  );
+  if (!possibleValue) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(RouteDrawer, { "data-testid": "attribute-edit-possible-value-drawer", children: [
+    /* @__PURE__ */ jsxs(RouteDrawer.Header, { children: [
+      /* @__PURE__ */ jsx(RouteDrawer.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: t("attributes.editPossibleValue.header") }) }),
+      /* @__PURE__ */ jsx(RouteDrawer.Description, { className: "sr-only", children: t("attributes.editPossibleValue.subtitle") })
+    ] }),
+    /* @__PURE__ */ jsx(
+      EditPossibleValueForm,
+      {
+        attributeId: id,
+        possibleValue
+      }
+    )
+  ] });
+};
+export {
+  AttributeEditPossibleValue as Component
+};