@mercurjs/admin 2.1.2 → 2.2.0-canary.2

package/dist/attribute-create-possible-value-EXVHC272.js

@@ -0,0 +1,476 @@
+import {
+  RouteFocusModal,
+  useRouteModal
+} from "./chunk-FWJLS7XD.js";
+import "./chunk-3QSRE5LS.js";
+import {
+  useProductAttribute,
+  useUpsertProductAttributeValues
+} from "./chunk-533GMKEG.js";
+import "./chunk-RHKRREUU.js";
+import "./chunk-ZA2KFUFR.js";
+import "./chunk-ZBWL72TB.js";
+import "./chunk-NBMM2TZK.js";
+
+// src/pages/attributes/attribute-create-possible-value/attribute-create-possible-value.tsx
+import { useState } from "react";
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { DotsSix, XMark, TagIllustration } from "@medusajs/icons";
+import {
+  Button,
+  clx,
+  Heading,
+  Hint,
+  IconButton,
+  Input,
+  ProgressTabs,
+  Text,
+  toast
+} from "@medusajs/ui";
+import {
+  useFieldArray,
+  useForm,
+  useFormContext,
+  FormProvider
+} from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { useParams } from "react-router-dom";
+import { z } from "zod";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CreatePossibleValuesSchema = z.object({
+  new_values: z.array(
+    z.object({
+      id: z.string(),
+      value: z.string().min(1)
+    })
+  ).min(1)
+});
+var SortableValueInput = ({
+  id,
+  index,
+  onRemove
+}) => {
+  const { t } = useTranslation();
+  const {
+    register,
+    formState: { errors }
+  } = useFormContext();
+  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition
+  };
+  const fieldError = errors.new_values?.[index]?.value;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      style,
+      className: "flex items-center gap-1.5 p-1.5 bg-ui-bg-component shadow-elevation-card-rest rounded-xl mb-2",
+      "data-testid": `create-possible-value-input-item-${index}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "cursor-grab active:cursor-grabbing",
+            ...attributes,
+            ...listeners,
+            "data-testid": `create-possible-value-drag-handle-${index}`,
+            children: /* @__PURE__ */ jsx(DotsSix, { className: "text-ui-fg-subtle" })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              className: "bg-ui-bg-field-component hover:bg-ui-bg-field-component-hover",
+              "aria-invalid": !!fieldError,
+              placeholder: t("attributes.createPossibleValues.enterValue"),
+              ...register(`new_values.${index}.value`),
+              "data-testid": `create-possible-value-input-${index}`
+            }
+          ),
+          fieldError && /* @__PURE__ */ jsx(
+            Hint,
+            {
+              variant: "error",
+              className: "mt-1",
+              "data-testid": `create-possible-value-error-${index}`,
+              children: fieldError.message
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            variant: "transparent",
+            size: "small",
+            type: "button",
+            onClick: onRemove,
+            "data-testid": `create-possible-value-remove-button-${index}`,
+            children: /* @__PURE__ */ jsx(XMark, {})
+          }
+        )
+      ]
+    }
+  );
+};
+var SortableRankingItem = ({
+  id,
+  value,
+  index,
+  isGhost
+}) => {
+  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition
+  };
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      ref: setNodeRef,
+      style,
+      className: clx("-mb-px list-none", {
+        "[&:first-of-type>div]:border-t-0": true
+      }),
+      "data-testid": `ranking-item-${index}`,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: clx(
+            "bg-ui-bg-base transition-fg relative flex items-center gap-x-3 border-y px-6 py-2.5",
+            {
+              "bg-ui-bg-base-hover z-[1] opacity-50": isGhost
+            }
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                size: "small",
+                variant: "transparent",
+                type: "button",
+                className: "cursor-grab active:cursor-grabbing",
+                ...attributes,
+                ...listeners,
+                "data-testid": `ranking-item-drag-handle-${index}`,
+                children: /* @__PURE__ */ jsx(DotsSix, {})
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "flex size-7 items-center justify-center", children: /* @__PURE__ */ jsx(TagIllustration, {}) }),
+            /* @__PURE__ */ jsx("div", { className: "txt-compact-small text-ui-fg-subtle flex-grow truncate", children: value })
+          ]
+        }
+      )
+    }
+  );
+};
+var AttributeCreatePossibleValueInner = () => {
+  const { t } = useTranslation();
+  const { id } = useParams();
+  const { handleSuccess } = useRouteModal();
+  const { product_attribute: attribute, isPending: isAttributeLoading } = useProductAttribute(id);
+  const { mutateAsync: upsertValues } = useUpsertProductAttributeValues(id);
+  const [activeTab, setActiveTab] = useState(
+    "values"
+  );
+  const [tabStatuses, setTabStatuses] = useState({
+    valuesStatus: "not-started",
+    organizeStatus: "not-started"
+  });
+  const [rankingItems, setRankingItems] = useState([]);
+  const [rankingActiveId, setRankingActiveId] = useState(null);
+  const [isSaving, setIsSaving] = useState(false);
+  const form = useForm({
+    defaultValues: {
+      new_values: [{ id: crypto.randomUUID(), value: "" }]
+    },
+    resolver: zodResolver(CreatePossibleValuesSchema)
+  });
+  const { fields, append, remove } = useFieldArray({
+    control: form.control,
+    name: "new_values"
+  });
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  );
+  const handleValuesDragEnd = (event) => {
+    const { active, over } = event;
+    if (over && active.id !== over.id) {
+      const oldIndex = fields.findIndex((field) => field.id === active.id);
+      const newIndex = fields.findIndex((field) => field.id === over.id);
+      const currentValues = form.getValues("new_values");
+      const reordered = arrayMove(currentValues, oldIndex, newIndex);
+      reordered.forEach((item, idx) => {
+        form.setValue(`new_values.${idx}.id`, item.id);
+        form.setValue(`new_values.${idx}.value`, item.value);
+      });
+    }
+  };
+  const handleRankingDragEnd = (event) => {
+    setRankingActiveId(null);
+    const { active, over } = event;
+    if (over && active.id !== over.id) {
+      setRankingItems((items) => {
+        const oldIndex = items.findIndex((item) => item.id === active.id);
+        const newIndex = items.findIndex((item) => item.id === over.id);
+        return arrayMove(items, oldIndex, newIndex);
+      });
+    }
+  };
+  const handleAddValue = () => {
+    append({ id: crypto.randomUUID(), value: "" });
+    setTabStatuses((prev) => ({
+      ...prev,
+      valuesStatus: "in-progress"
+    }));
+  };
+  const handleContinue = form.handleSubmit((data) => {
+    const newValues = data.new_values.filter((v) => v.value.trim() !== "");
+    const existingValues = (attribute?.values ?? []).slice().sort((a, b) => (a.rank ?? 0) - (b.rank ?? 0)).map((pv) => ({
+      id: pv.id,
+      value: pv.name,
+      isNew: false
+    }));
+    const newRankingItems = newValues.map((nv) => ({
+      id: nv.id,
+      value: nv.value,
+      isNew: true
+    }));
+    setRankingItems([...existingValues, ...newRankingItems]);
+    setTabStatuses({
+      valuesStatus: "completed",
+      organizeStatus: "in-progress"
+    });
+    setActiveTab("organize-ranking");
+  });
+  const handleTabChange = (value) => {
+    const newTab = value;
+    if (newTab === "organize-ranking" && tabStatuses.valuesStatus !== "completed") {
+      return;
+    }
+    setActiveTab(newTab);
+  };
+  const handleSave = async () => {
+    setIsSaving(true);
+    try {
+      const values = rankingItems.map((item, index) => {
+        if (item.isNew) {
+          return { name: item.value, rank: index + 1 };
+        }
+        return { id: item.id, rank: index + 1 };
+      });
+      await upsertValues({ values });
+      toast.success(t("attributes.createPossibleValues.successToast"));
+      handleSuccess(`/settings/attributes/${id}`);
+    } catch (error) {
+      toast.error(error.message);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  if (isAttributeLoading || !attribute) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(FormProvider, { ...form, children: [
+    /* @__PURE__ */ jsxs(
+      ProgressTabs,
+      {
+        value: activeTab,
+        onValueChange: handleTabChange,
+        className: "flex size-full flex-col overflow-hidden",
+        "data-testid": "attribute-create-possible-value-progress-tabs",
+        children: [
+          /* @__PURE__ */ jsx(RouteFocusModal.Header, { "data-testid": "attribute-create-possible-value-modal-header", children: /* @__PURE__ */ jsx("div", { className: "-my-2 w-full border-l", children: /* @__PURE__ */ jsxs(
+            ProgressTabs.List,
+            {
+              className: "justify-start-start flex w-full items-center",
+              "data-testid": "attribute-create-possible-value-tabs-list",
+              children: [
+                /* @__PURE__ */ jsx(
+                  ProgressTabs.Trigger,
+                  {
+                    value: "values",
+                    status: tabStatuses.valuesStatus,
+                    className: "max-w-[200px] truncate",
+                    "data-testid": "attribute-create-possible-value-values-tab",
+                    children: t("attributes.createPossibleValues.tabs.values")
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  ProgressTabs.Trigger,
+                  {
+                    value: "organize-ranking",
+                    status: tabStatuses.organizeStatus,
+                    className: "max-w-[200px] truncate",
+                    "data-testid": "attribute-create-possible-value-organize-tab",
+                    children: t("attributes.createPossibleValues.tabs.organizeRanking")
+                  }
+                )
+              ]
+            }
+          ) }) }),
+          /* @__PURE__ */ jsxs(
+            RouteFocusModal.Body,
+            {
+              className: "size-full overflow-hidden",
+              "data-testid": "attribute-create-possible-value-modal-body",
+              children: [
+                /* @__PURE__ */ jsx(
+                  ProgressTabs.Content,
+                  {
+                    value: "values",
+                    className: "size-full overflow-y-auto",
+                    children: /* @__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-4", children: [
+                      /* @__PURE__ */ jsxs("div", { children: [
+                        /* @__PURE__ */ jsx(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { "data-testid": "attribute-create-possible-value-heading", children: t("attributes.createPossibleValues.header") }) }),
+                        /* @__PURE__ */ jsx(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx(
+                          Text,
+                          {
+                            size: "small",
+                            className: "text-ui-fg-subtle mt-1",
+                            "data-testid": "attribute-create-possible-value-subtitle",
+                            children: t("attributes.createPossibleValues.subtitle", {
+                              name: attribute.name
+                            })
+                          }
+                        ) })
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        DndContext,
+                        {
+                          sensors,
+                          collisionDetection: closestCenter,
+                          onDragEnd: handleValuesDragEnd,
+                          children: /* @__PURE__ */ jsx(
+                            SortableContext,
+                            {
+                              items: fields.map((field) => field.id),
+                              strategy: verticalListSortingStrategy,
+                              children: fields.map((field, index) => /* @__PURE__ */ jsx(
+                                SortableValueInput,
+                                {
+                                  id: field.id,
+                                  index,
+                                  onRemove: () => remove(index)
+                                },
+                                field.id
+                              ))
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          type: "button",
+                          variant: "secondary",
+                          size: "small",
+                          onClick: handleAddValue,
+                          "data-testid": "attribute-create-possible-value-add-button",
+                          children: t("attributes.createPossibleValues.addValue")
+                        }
+                      )
+                    ] }) })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  ProgressTabs.Content,
+                  {
+                    value: "organize-ranking",
+                    className: "size-full overflow-y-auto",
+                    children: /* @__PURE__ */ jsx(
+                      DndContext,
+                      {
+                        sensors,
+                        collisionDetection: closestCenter,
+                        onDragStart: ({ active }) => setRankingActiveId(active.id),
+                        onDragEnd: handleRankingDragEnd,
+                        children: /* @__PURE__ */ jsx(
+                          SortableContext,
+                          {
+                            items: rankingItems.map((item) => item.id),
+                            strategy: verticalListSortingStrategy,
+                            children: /* @__PURE__ */ jsx("ul", { className: "list-none p-0 m-0", children: rankingItems.map((item, index) => /* @__PURE__ */ jsx(
+                              SortableRankingItem,
+                              {
+                                id: item.id,
+                                value: item.value,
+                                index,
+                                isGhost: rankingActiveId === item.id
+                              },
+                              item.id
+                            )) })
+                          }
+                        )
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(RouteFocusModal.Footer, { "data-testid": "attribute-create-possible-value-modal-footer", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
+      /* @__PURE__ */ jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "small",
+          variant: "secondary",
+          type: "button",
+          "data-testid": "attribute-create-possible-value-cancel-button",
+          children: t("actions.cancel")
+        }
+      ) }),
+      activeTab === "values" ? /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "small",
+          type: "button",
+          onClick: handleContinue,
+          "data-testid": "attribute-create-possible-value-continue-button",
+          children: t("actions.continue")
+        }
+      ) : /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "small",
+          type: "button",
+          onClick: handleSave,
+          isLoading: isSaving,
+          "data-testid": "attribute-create-possible-value-save-button",
+          children: t("actions.save")
+        }
+      )
+    ] }) })
+  ] });
+};
+var AttributeCreatePossibleValue = () => {
+  return /* @__PURE__ */ jsx(RouteFocusModal, { "data-testid": "attribute-create-possible-value-modal", children: /* @__PURE__ */ jsx(AttributeCreatePossibleValueInner, {}) });
+};
+export {
+  AttributeCreatePossibleValue as Component
+};