@mercurjs/admin 2.1.6 → 2.2.0-canary.11

package/dist/product-add-existing-attributes-GGRRNFDK.js

@@ -0,0 +1,456 @@
+import {
+  AttributeValueInput
+} from "./chunk-JSMUFZZN.js";
+import {
+  useAttributeTableFilters
+} from "./chunk-RT6L7JXU.js";
+import {
+  useAttributeTableQuery
+} from "./chunk-4YWKKCTT.js";
+import "./chunk-AW77UWCZ.js";
+import "./chunk-TKGWSUEI.js";
+import {
+  KeyboundForm
+} from "./chunk-U2ZFCAPX.js";
+import {
+  RouteFocusModal,
+  useRouteModal
+} from "./chunk-FWJLS7XD.js";
+import {
+  Form
+} from "./chunk-3QSRE5LS.js";
+import {
+  PRODUCT_DETAIL_QUERY
+} from "./chunk-GVEF6UDT.js";
+import {
+  DataTable
+} from "./chunk-LYZT5REU.js";
+import "./chunk-THHRRYRS.js";
+import {
+  require_dist
+} from "./chunk-UCYSCKZV.js";
+import "./chunk-LJDGVBOQ.js";
+import "./chunk-OH4AABUT.js";
+import "./chunk-AEMDNTW5.js";
+import "./chunk-LYD3C73Z.js";
+import "./chunk-46M463BR.js";
+import "./chunk-NJP3DEE5.js";
+import {
+  useProductAttributes
+} from "./chunk-533GMKEG.js";
+import "./chunk-YFRC6GEN.js";
+import "./chunk-DAXXLQKB.js";
+import "./chunk-OHOWEMHO.js";
+import "./chunk-JPNPTILP.js";
+import "./chunk-ESPLVOFC.js";
+import "./chunk-GKGLVDDV.js";
+import "./chunk-N6SI4IIT.js";
+import "./chunk-WJJXUXSO.js";
+import "./chunk-LAPEZATU.js";
+import "./chunk-453BC56K.js";
+import "./chunk-Z5T5EPLF.js";
+import "./chunk-FXWKGNRV.js";
+import "./chunk-VDKOJ5WD.js";
+import "./chunk-ZN7LWXVC.js";
+import "./chunk-P5XVG4PY.js";
+import "./chunk-VYMODH6P.js";
+import "./chunk-LEG67A2R.js";
+import "./chunk-PRBE5CM3.js";
+import "./chunk-5TRY5IMZ.js";
+import "./chunk-EPHVGD5Z.js";
+import "./chunk-VT6QIVZW.js";
+import "./chunk-BDGZ4EQO.js";
+import "./chunk-6FHQCLHQ.js";
+import "./chunk-DN2K5EAH.js";
+import "./chunk-LAVHRER2.js";
+import "./chunk-Y7QKP6QU.js";
+import {
+  useBatchProductAttributes,
+  useProduct
+} from "./chunk-H3MAUKL7.js";
+import "./chunk-RHKRREUU.js";
+import "./chunk-ZA2KFUFR.js";
+import "./chunk-ZBWL72TB.js";
+import {
+  __toESM
+} from "./chunk-NBMM2TZK.js";
+
+// src/pages/products/product-add-existing-attributes/product-add-existing-attributes.tsx
+var import_types = __toESM(require_dist(), 1);
+import { XMarkMini } from "@medusajs/icons";
+import {
+  Badge,
+  Button,
+  createDataTableColumnHelper,
+  Heading,
+  IconButton,
+  InlineTip,
+  Input,
+  Label,
+  Text,
+  toast
+} from "@medusajs/ui";
+import { useEffect, useMemo, useState } from "react";
+import { useFieldArray, useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { useParams } from "react-router-dom";
+import { keepPreviousData } from "@tanstack/react-query";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as zod from "zod";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var PAGE_SIZE = 20;
+var PREFIX = "add-existing-attrs";
+var MAX_VISIBLE_VALUES = 2;
+var ATTRIBUTE_TYPE_LABELS = {
+  single_select: "attributes.type.select",
+  multi_select: "attributes.type.multivalue",
+  unit: "attributes.type.unit",
+  toggle: "attributes.type.toggle",
+  text: "attributes.type.text_area"
+};
+var AttributeValueSchema = zod.object({
+  attribute_id: zod.string(),
+  name: zod.string(),
+  type: zod.string(),
+  is_variant_axis: zod.boolean(),
+  available_values: zod.array(
+    zod.object({ id: zod.string(), name: zod.string() })
+  ),
+  values: zod.union([zod.string(), zod.array(zod.string())]).refine(
+    (val) => {
+      if (Array.isArray(val)) return val.length > 0;
+      return val.length > 0;
+    },
+    { message: "Value is required" }
+  )
+});
+var AddExistingAttributesSchema = zod.object({
+  attributes: zod.array(AttributeValueSchema)
+});
+var ProductAddExistingAttributes = () => {
+  const { id: productId } = useParams();
+  return /* @__PURE__ */ jsxs(RouteFocusModal, { children: [
+    /* @__PURE__ */ jsx(RouteFocusModal.Header, {}),
+    /* @__PURE__ */ jsx(Content, { productId })
+  ] });
+};
+var Content = ({ productId }) => {
+  const { t } = useTranslation();
+  const { handleSuccess } = useRouteModal();
+  const [step, setStep] = useState("select");
+  const [rowSelection, setRowSelection] = useState({});
+  const { searchParams } = useAttributeTableQuery({
+    pageSize: PAGE_SIZE,
+    prefix: PREFIX
+  });
+  const { product_attributes, count, isLoading, isError, error } = useProductAttributes(searchParams, {
+    placeholderData: keepPreviousData
+  });
+  const { product } = useProduct(productId, PRODUCT_DETAIL_QUERY);
+  const assignedIds = useMemo(
+    () => new Set(
+      (product?.attributes ?? []).map(
+        (a) => a.id
+      )
+    ),
+    [product]
+  );
+  const lockedIds = useMemo(() => {
+    const ids = new Set(assignedIds);
+    for (const attr of product_attributes ?? []) {
+      if (attr.is_required) ids.add(attr.id);
+    }
+    return ids;
+  }, [assignedIds, product_attributes]);
+  useEffect(() => {
+    if (!lockedIds.size) return;
+    setRowSelection((prev) => {
+      const next = { ...prev };
+      let changed = false;
+      for (const id of lockedIds) {
+        if (!next[id]) {
+          next[id] = true;
+          changed = true;
+        }
+      }
+      return changed ? next : prev;
+    });
+  }, [lockedIds]);
+  const { mutateAsync, isPending } = useBatchProductAttributes(productId);
+  const form = useForm({
+    defaultValues: { attributes: [] },
+    resolver: zodResolver(AddExistingAttributesSchema)
+  });
+  const { fields, remove } = useFieldArray({
+    control: form.control,
+    name: "attributes"
+  });
+  const filters = useAttributeTableFilters();
+  const columns = useColumns();
+  if (isError) {
+    throw error;
+  }
+  const handleContinue = () => {
+    const selectedIds = Object.keys(rowSelection).filter(
+      (id) => rowSelection[id] && !lockedIds.has(id)
+    );
+    if (!selectedIds.length) return;
+    const attrs = selectedIds.map((id) => product_attributes?.find((a) => a.id === id)).filter(Boolean).map((attr) => ({
+      attribute_id: attr.id,
+      name: attr.name,
+      type: attr.type,
+      is_variant_axis: attr.is_variant_axis,
+      available_values: attr.values?.map((v) => ({ id: v.id, name: v.name })) ?? [],
+      values: attr.type === import_types.AttributeType.MULTI_SELECT ? [] : ""
+    }));
+    form.reset({ attributes: attrs });
+    setStep("values");
+  };
+  const handleBack = () => {
+    setStep("select");
+  };
+  const handleRemoveAttr = (index, attrId) => {
+    remove(index);
+    setRowSelection((prev) => {
+      const next = { ...prev };
+      delete next[attrId];
+      return next;
+    });
+  };
+  const handleSubmit = form.handleSubmit(async (data) => {
+    const batchCreate = [];
+    for (const attr of data.attributes) {
+      const vals = Array.isArray(attr.values) ? attr.values : attr.values ? [attr.values] : [];
+      const hasPresetValues = attr.type === "single_select" || attr.type === "multi_select";
+      if (hasPresetValues) {
+        const nameToId = new Map(
+          attr.available_values.map((v) => [v.name, v.id])
+        );
+        const valueIds = vals.map((name) => nameToId.get(name)).filter(Boolean);
+        batchCreate.push({
+          attribute_id: attr.attribute_id,
+          attribute_value_ids: valueIds.length ? valueIds : void 0
+        });
+      } else {
+        batchCreate.push({
+          attribute_id: attr.attribute_id,
+          values: vals.length ? vals : void 0
+        });
+      }
+    }
+    await mutateAsync(
+      { create: batchCreate },
+      {
+        onSuccess: () => {
+          handleSuccess();
+        },
+        onError: (err) => {
+          toast.error(err.message);
+        }
+      }
+    );
+  });
+  return /* @__PURE__ */ jsx(Fragment, { children: step === "select" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(RouteFocusModal.Body, { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(
+      DataTable,
+      {
+        data: product_attributes,
+        columns,
+        filters,
+        rowCount: count,
+        pageSize: PAGE_SIZE,
+        getRowId: (row) => row.id,
+        rowSelection: {
+          state: rowSelection,
+          onRowSelectionChange: setRowSelection,
+          enableRowSelection: (row) => !lockedIds.has(row.original.id)
+        },
+        isLoading,
+        layout: "fill",
+        prefix: PREFIX
+      }
+    ) }),
+    /* @__PURE__ */ jsx(RouteFocusModal.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", children: t("actions.cancel") }) }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "small",
+          type: "button",
+          onClick: handleContinue,
+          disabled: !Object.entries(rowSelection).some(
+            ([id, selected]) => selected && !lockedIds.has(id)
+          ),
+          children: t("actions.continue")
+        }
+      )
+    ] }) })
+  ] }) : /* @__PURE__ */ jsx(RouteFocusModal.Form, { form, children: /* @__PURE__ */ jsxs(
+    KeyboundForm,
+    {
+      onSubmit: handleSubmit,
+      className: "flex h-full flex-col",
+      children: [
+        /* @__PURE__ */ jsx(RouteFocusModal.Body, { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex w-full max-w-[720px] flex-col gap-y-8 p-16", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(Heading, { level: "h2", children: t("products.create.attributes.header") }),
+            /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-subtle mt-1", children: t("products.create.attributes.description") })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-y-4", children: fields.map((field, index) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "bg-ui-bg-component shadow-elevation-card-rest grid grid-cols-[1fr_28px] items-start gap-1.5 rounded-xl p-1.5",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[min-content,1fr] items-center gap-1.5", children: [
+                  /* @__PURE__ */ jsx("div", { className: "flex items-center px-2 py-1.5", children: /* @__PURE__ */ jsx(
+                    Label,
+                    {
+                      size: "xsmall",
+                      weight: "plus",
+                      className: "text-ui-fg-subtle",
+                      children: t("fields.title")
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      value: field.name,
+                      disabled: true,
+                      className: "bg-ui-bg-field-component"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { className: "flex items-center px-2 py-1.5", children: /* @__PURE__ */ jsx(
+                    Label,
+                    {
+                      size: "xsmall",
+                      weight: "plus",
+                      className: "text-ui-fg-subtle",
+                      children: t("fields.values")
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(
+                    Form.Field,
+                    {
+                      control: form.control,
+                      name: `attributes.${index}.values`,
+                      render: ({
+                        field: { onChange, value }
+                      }) => /* @__PURE__ */ jsxs(Form.Item, { children: [
+                        /* @__PURE__ */ jsx(Form.Control, { children: /* @__PURE__ */ jsx(
+                          AttributeValueInput,
+                          {
+                            type: field.type,
+                            value,
+                            onChange,
+                            availableValues: field.available_values
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsx(Form.ErrorMessage, {})
+                      ] })
+                    }
+                  ),
+                  field.is_variant_axis && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx("div", {}),
+                    /* @__PURE__ */ jsx(
+                      InlineTip,
+                      {
+                        label: t("products.create.attributes.tip"),
+                        children: t(
+                          "products.create.attributes.variantAxisTip"
+                        )
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    type: "button",
+                    size: "small",
+                    variant: "transparent",
+                    className: "text-ui-fg-muted",
+                    onClick: () => handleRemoveAttr(index, field.attribute_id),
+                    children: /* @__PURE__ */ jsx(XMarkMini, {})
+                  }
+                )
+              ]
+            },
+            field.id
+          )) })
+        ] }) }),
+        /* @__PURE__ */ jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "small",
+              variant: "secondary",
+              type: "button",
+              onClick: handleBack,
+              children: t("actions.back")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "small",
+              type: "submit",
+              isLoading: isPending,
+              disabled: !fields.length,
+              children: t("actions.save")
+            }
+          )
+        ] }) })
+      ]
+    }
+  ) }) });
+};
+var columnHelper = createDataTableColumnHelper();
+var useColumns = () => {
+  const { t } = useTranslation();
+  return useMemo(
+    () => [
+      columnHelper.select(),
+      columnHelper.accessor("name", {
+        header: t("attributes.fields.name"),
+        enableSorting: false
+      }),
+      columnHelper.accessor("type", {
+        header: t("attributes.fields.type"),
+        cell: (info) => {
+          const type = info.getValue();
+          const labelKey = ATTRIBUTE_TYPE_LABELS[type];
+          return labelKey ? t(labelKey) : type;
+        },
+        enableSorting: false
+      }),
+      columnHelper.accessor("is_variant_axis", {
+        header: t("attributes.fields.variantAxis"),
+        cell: (info) => info.getValue() ? t("filters.radio.yes") : t("filters.radio.no"),
+        enableSorting: false
+      }),
+      columnHelper.display({
+        id: "values",
+        header: t("attributes.fields.values"),
+        cell: ({ row }) => {
+          const values = row.original.values ?? [];
+          if (!values.length) {
+            return /* @__PURE__ */ jsx("span", { className: "text-ui-fg-muted", children: "-" });
+          }
+          const visible = values.slice(0, MAX_VISIBLE_VALUES);
+          const remaining = values.length - MAX_VISIBLE_VALUES;
+          return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-1", children: [
+            visible.map((v) => /* @__PURE__ */ jsx(Badge, { size: "2xsmall", color: "grey", children: v.name }, v.id)),
+            remaining > 0 && /* @__PURE__ */ jsxs(Badge, { size: "2xsmall", color: "grey", children: [
+              "+",
+              remaining
+            ] })
+          ] });
+        }
+      })
+    ],
+    [t]
+  );
+};
+export {
+  ProductAddExistingAttributes as Component
+};

package/dist/{product-attributes-ASPKDH7H.js → product-attributes-C3KHQF2I.js}

@@ -3,9 +3,6 @@ import {
   CountrySelect
 } from "./chunk-V74Y5NIV.js";
 import "./chunk-JRTZWK77.js";
-import {
-  PRODUCT_DETAIL_QUERY
-} from "./chunk-35NDMIYZ.js";
 import "./chunk-TKGWSUEI.js";
 import {
   KeyboundForm
@@ -17,10 +14,13 @@ import {
 import {
   Form
 } from "./chunk-3QSRE5LS.js";
+import {
+  PRODUCT_DETAIL_QUERY
+} from "./chunk-GVEF6UDT.js";
 import {
   useProduct,
   useUpdateProduct
-} from "./chunk-5CK6XEFV.js";
+} from "./chunk-H3MAUKL7.js";
 import "./chunk-RHKRREUU.js";
 import "./chunk-ZA2KFUFR.js";
 import "./chunk-ZBWL72TB.js";