medusa-product-helper 0.0.4 → 0.0.5

package/.medusa/server/src/admin/index.js

@@ -1,62 +1,9 @@
 "use strict";
-const adminSdk = require("@medusajs/admin-sdk");
-const react = require("react");
 const jsxRuntime = require("react/jsx-runtime");
+const adminSdk = require("@medusajs/admin-sdk");
 const ui = require("@medusajs/ui");
+const react = require("react");
 const reactQuery = require("@tanstack/react-query");
-const HideDefaultMetadataWidget = () => {
-  react.useEffect(() => {
-    const hideMetadataSection = () => {
-      const headings = document.querySelectorAll("h2");
-      headings.forEach((heading) => {
-        var _a;
-        if (((_a = heading.textContent) == null ? void 0 : _a.trim()) === "Metadata") {
-          let container = heading.parentElement;
-          while (container && container !== document.body) {
-            const hasContainerClass = container.classList.toString().includes("Container");
-            const isInSidebar = container.closest('[class*="Sidebar"]') || container.closest('[class*="sidebar"]');
-            if (hasContainerClass || isInSidebar) {
-              const editLink = container.querySelector('a[href*="metadata/edit"]');
-              const badge = container.querySelector('div[class*="Badge"]');
-              if (editLink && badge) {
-                container.style.display = "none";
-                container.setAttribute("data-metadata-hidden", "true");
-                return;
-              }
-            }
-            container = container.parentElement;
-          }
-        }
-      });
-    };
-    const runHide = () => {
-      setTimeout(hideMetadataSection, 100);
-    };
-    runHide();
-    const observer = new MutationObserver(() => {
-      const alreadyHidden = document.querySelector('[data-metadata-hidden="true"]');
-      if (!alreadyHidden) {
-        runHide();
-      }
-    });
-    observer.observe(document.body, {
-      childList: true,
-      subtree: true
-    });
-    return () => {
-      observer.disconnect();
-      const hidden = document.querySelector('[data-metadata-hidden="true"]');
-      if (hidden) {
-        hidden.style.display = "";
-        hidden.removeAttribute("data-metadata-hidden");
-      }
-    };
-  }, []);
-  return null;
-};
-adminSdk.defineWidgetConfig({
-  zone: "product.details.side.before"
-});
 const METADATA_FIELD_TYPES = ["number", "text", "file", "bool"];
 const VALID_FIELD_TYPES = new Set(METADATA_FIELD_TYPES);
 function normalizeMetadataDescriptors(input) {
@@ -78,10 +25,12 @@ function normalizeMetadataDescriptors(input) {
       continue;
     }
     const label = getNormalizedLabel(item.label);
+    const filterable = typeof item.filterable === "boolean" ? item.filterable : Boolean(item.filterable);
     normalized.push({
       key,
       type,
-      ...label ? { label } : {}
+      ...label ? { label } : {},
+      ...filterable ? { filterable: true } : {}
     });
     seenKeys.add(key);
   }
@@ -237,11 +186,11 @@ function isDeepEqual(a, b) {
 }
 const CONFIG_ENDPOINT = "/admin/product-metadata-config";
 const QUERY_KEY = ["medusa-product-helper", "metadata-config"];
-const useProductMetadataConfig = () => {
+const useMetadataConfig = (entity) => {
   return reactQuery.useQuery({
-    queryKey: QUERY_KEY,
+    queryKey: [...QUERY_KEY, entity],
     queryFn: async () => {
-      const response = await fetch(CONFIG_ENDPOINT, {
+      const response = await fetch(`${CONFIG_ENDPOINT}?entity=${entity}`, {
         credentials: "include"
       });
       if (!response.ok) {
@@ -253,6 +202,455 @@ const useProductMetadataConfig = () => {
     staleTime: 5 * 60 * 1e3
   });
 };
+const useProductMetadataConfig = () => useMetadataConfig("product");
+const useCategoryMetadataConfig = () => useMetadataConfig("category");
+const CONFIG_DOCS_URL$1 = "https://docs.medusajs.com/admin/extension-points/widgets#product-category-details";
+const CategoryMetadataTableWidget = ({ data }) => {
+  const { data: descriptors = [], isPending, isError } = useCategoryMetadataConfig();
+  const metadata = (data == null ? void 0 : data.metadata) ?? {};
+  const [baselineMetadata, setBaselineMetadata] = react.useState(metadata);
+  const queryClient = reactQuery.useQueryClient();
+  react.useEffect(() => {
+    setBaselineMetadata(metadata);
+  }, [metadata]);
+  const initialState = react.useMemo(
+    () => buildInitialFormState(descriptors, baselineMetadata),
+    [descriptors, baselineMetadata]
+  );
+  const [values, setValues] = react.useState(
+    initialState
+  );
+  const [isSaving, setIsSaving] = react.useState(false);
+  react.useEffect(() => {
+    setValues(initialState);
+  }, [initialState]);
+  const errors = react.useMemo(() => {
+    return descriptors.reduce((acc, descriptor) => {
+      const error = validateValueForDescriptor(descriptor, values[descriptor.key]);
+      if (error) {
+        acc[descriptor.key] = error;
+      }
+      return acc;
+    }, {});
+  }, [descriptors, values]);
+  const hasErrors = Object.keys(errors).length > 0;
+  const isDirty = react.useMemo(() => {
+    return hasMetadataChanges({
+      descriptors,
+      values,
+      originalMetadata: baselineMetadata
+    });
+  }, [descriptors, values, baselineMetadata]);
+  const handleStringChange = (key, nextValue) => {
+    setValues((prev) => ({
+      ...prev,
+      [key]: nextValue
+    }));
+  };
+  const handleBooleanChange = (key, nextValue) => {
+    setValues((prev) => ({
+      ...prev,
+      [key]: nextValue
+    }));
+  };
+  const handleReset = () => {
+    setValues(initialState);
+  };
+  const handleSubmit = async () => {
+    if (!(data == null ? void 0 : data.id) || !descriptors.length) {
+      return;
+    }
+    setIsSaving(true);
+    try {
+      const metadataPayload = buildMetadataPayload({
+        descriptors,
+        values,
+        originalMetadata: baselineMetadata
+      });
+      const response = await fetch(`/admin/product-categories/${data.id}`, {
+        method: "POST",
+        credentials: "include",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          metadata: metadataPayload
+        })
+      });
+      if (!response.ok) {
+        const payload = await response.json().catch(() => null);
+        throw new Error((payload == null ? void 0 : payload.message) ?? "Unable to save metadata");
+      }
+      const updated = await response.json();
+      const nextMetadata = updated.product_category.metadata;
+      setBaselineMetadata(nextMetadata);
+      setValues(buildInitialFormState(descriptors, nextMetadata));
+      ui.toast.success("Metadata saved");
+      await queryClient.invalidateQueries({
+        queryKey: ["product-categories"]
+      });
+    } catch (error) {
+      ui.toast.error(error instanceof Error ? error.message : "Save failed");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "flex flex-col gap-y-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "flex flex-col gap-y-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: "Metadata" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { size: "2xsmall", rounded: "full", children: descriptors.length })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-subtle", children: "Structured metadata mapped to the keys you configured in the plugin options." })
+    ] }),
+    isPending ? /* @__PURE__ */ jsxRuntime.jsx(ui.Skeleton, { className: "h-[160px] w-full" }) : isError ? /* @__PURE__ */ jsxRuntime.jsxs(ui.InlineTip, { variant: "error", label: "Configuration unavailable", children: [
+      "Unable to load metadata configuration for this plugin. Confirm that the plugin is registered with options in ",
+      /* @__PURE__ */ jsxRuntime.jsx("code", { children: "medusa-config.ts" }),
+      "."
+    ] }) : !descriptors.length ? /* @__PURE__ */ jsxRuntime.jsxs(ui.InlineTip, { variant: "info", label: "No configured metadata keys", children: [
+      "Provide a ",
+      /* @__PURE__ */ jsxRuntime.jsx("code", { children: "metadataDescriptors" }),
+      " array in the plugin options to control which keys show up here.",
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          className: "text-ui-fg-interactive underline",
+          href: CONFIG_DOCS_URL$1,
+          target: "_blank",
+          rel: "noreferrer",
+          children: "Learn how to configure it."
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden rounded-lg border border-ui-border-base", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "min-w-full divide-y divide-ui-border-base", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "bg-ui-bg-subtle", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "th",
+            {
+              scope: "col",
+              className: "txt-compact-xsmall-plus text-left uppercase tracking-wide text-ui-fg-muted px-4 py-3",
+              children: "Label"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "th",
+            {
+              scope: "col",
+              className: "txt-compact-xsmall-plus text-left uppercase tracking-wide text-ui-fg-muted px-4 py-3",
+              children: "Value"
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "divide-y divide-ui-border-subtle bg-ui-bg-base", children: descriptors.map((descriptor) => {
+          const value = values[descriptor.key];
+          const error = errors[descriptor.key];
+          return /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "th",
+              {
+                scope: "row",
+                className: "txt-compact-medium text-ui-fg-base align-top px-4 py-4",
+                children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: descriptor.label ?? descriptor.key }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "txt-compact-xsmall-plus text-ui-fg-muted uppercase tracking-wide", children: descriptor.type })
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("td", { className: "align-top px-4 py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ValueField$1,
+                {
+                  descriptor,
+                  value,
+                  onStringChange: handleStringChange,
+                  onBooleanChange: handleBooleanChange
+                }
+              ),
+              error && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "txt-compact-small text-ui-fg-error", children: error })
+            ] }) })
+          ] }, descriptor.key);
+        }) })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-3 border-t border-ui-border-subtle pt-3 md:flex-row md:items-center md:justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-muted", children: "Changes are stored on the category metadata object. Clearing a field removes the corresponding key on save." }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Button,
+            {
+              variant: "secondary",
+              size: "small",
+              disabled: !isDirty || isSaving,
+              onClick: handleReset,
+              children: "Reset"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Button,
+            {
+              size: "small",
+              onClick: handleSubmit,
+              disabled: !isDirty || hasErrors || isSaving,
+              isLoading: isSaving,
+              children: "Save metadata"
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+};
+const ValueField$1 = ({
+  descriptor,
+  value,
+  onStringChange,
+  onBooleanChange
+}) => {
+  const fileInputRef = react.useRef(null);
+  const [isUploading, setIsUploading] = react.useState(false);
+  const handleFileUpload = async (event) => {
+    var _a;
+    const file = (_a = event.target.files) == null ? void 0 : _a[0];
+    if (!file) {
+      return;
+    }
+    setIsUploading(true);
+    try {
+      const formData = new FormData();
+      formData.append("files", file);
+      const response = await fetch("/admin/uploads", {
+        method: "POST",
+        credentials: "include",
+        body: formData
+      });
+      if (!response.ok) {
+        const payload = await response.json().catch(() => null);
+        throw new Error((payload == null ? void 0 : payload.message) ?? "File upload failed");
+      }
+      const result = await response.json();
+      if (result.files && result.files.length > 0) {
+        const uploadedFile = result.files[0];
+        const fileUrl = uploadedFile.url || uploadedFile.key;
+        if (fileUrl) {
+          onStringChange(descriptor.key, fileUrl);
+          ui.toast.success("File uploaded successfully");
+        } else {
+          throw new Error("File upload succeeded but no URL returned");
+        }
+      } else {
+        throw new Error("File upload failed - no files returned");
+      }
+    } catch (error) {
+      ui.toast.error(
+        error instanceof Error ? error.message : "Failed to upload file"
+      );
+    } finally {
+      setIsUploading(false);
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+    }
+  };
+  if (descriptor.type === "bool") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Switch,
+        {
+          checked: Boolean(value),
+          onCheckedChange: (checked) => onBooleanChange(descriptor.key, Boolean(checked)),
+          "aria-label": `Toggle ${descriptor.label ?? descriptor.key}`
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "txt-compact-small text-ui-fg-muted", children: Boolean(value) ? "True" : "False" })
+    ] });
+  }
+  if (descriptor.type === "text") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Textarea,
+      {
+        value: value ?? "",
+        placeholder: "Enter text",
+        rows: 3,
+        onChange: (event) => onStringChange(descriptor.key, event.target.value)
+      }
+    );
+  }
+  if (descriptor.type === "number") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Input,
+      {
+        type: "text",
+        inputMode: "decimal",
+        placeholder: "0.00",
+        value: value ?? "",
+        onChange: (event) => onStringChange(descriptor.key, event.target.value)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-y-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-x-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Input,
+        {
+          type: "url",
+          placeholder: "https://example.com/file",
+          value: value ?? "",
+          onChange: (event) => onStringChange(descriptor.key, event.target.value),
+          className: "flex-1"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          ref: fileInputRef,
+          type: "file",
+          className: "hidden",
+          onChange: handleFileUpload,
+          disabled: isUploading,
+          "aria-label": `Upload file for ${descriptor.label ?? descriptor.key}`
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Button,
+        {
+          type: "button",
+          variant: "secondary",
+          size: "small",
+          onClick: () => {
+            var _a;
+            return (_a = fileInputRef.current) == null ? void 0 : _a.click();
+          },
+          disabled: isUploading,
+          isLoading: isUploading,
+          children: isUploading ? "Uploading..." : "Upload"
+        }
+      )
+    ] }),
+    typeof value === "string" && value && /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        className: "txt-compact-small-plus text-ui-fg-interactive underline",
+        href: value,
+        target: "_blank",
+        rel: "noreferrer",
+        children: "View file"
+      }
+    )
+  ] });
+};
+adminSdk.defineWidgetConfig({
+  zone: "product_category.details.after"
+});
+const HideCategoryDefaultMetadataWidget = () => {
+  react.useEffect(() => {
+    const hideMetadataSection = () => {
+      const headings = document.querySelectorAll("h2");
+      headings.forEach((heading) => {
+        var _a;
+        if (((_a = heading.textContent) == null ? void 0 : _a.trim()) === "Metadata") {
+          let container = heading.parentElement;
+          while (container && container !== document.body) {
+            const hasContainerClass = container.classList.toString().includes("Container");
+            const isInSidebar = container.closest('[class*="Sidebar"]') || container.closest('[class*="sidebar"]');
+            if (hasContainerClass || isInSidebar) {
+              const editLink = container.querySelector('a[href*="metadata/edit"]');
+              const badge = container.querySelector('div[class*="Badge"]');
+              if (editLink && badge) {
+                container.style.display = "none";
+                container.setAttribute("data-category-metadata-hidden", "true");
+                return;
+              }
+            }
+            container = container.parentElement;
+          }
+        }
+      });
+    };
+    const runHide = () => {
+      setTimeout(hideMetadataSection, 100);
+    };
+    runHide();
+    const observer = new MutationObserver(() => {
+      const alreadyHidden = document.querySelector(
+        '[data-category-metadata-hidden="true"]'
+      );
+      if (!alreadyHidden) {
+        runHide();
+      }
+    });
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+    return () => {
+      observer.disconnect();
+      const hidden = document.querySelector(
+        '[data-category-metadata-hidden="true"]'
+      );
+      if (hidden) {
+        hidden.style.display = "";
+        hidden.removeAttribute("data-category-metadata-hidden");
+      }
+    };
+  }, []);
+  return null;
+};
+adminSdk.defineWidgetConfig({
+  zone: "product_category.details.side.before"
+});
+const HideDefaultMetadataWidget = () => {
+  react.useEffect(() => {
+    const hideMetadataSection = () => {
+      const headings = document.querySelectorAll("h2");
+      headings.forEach((heading) => {
+        var _a;
+        if (((_a = heading.textContent) == null ? void 0 : _a.trim()) === "Metadata") {
+          let container = heading.parentElement;
+          while (container && container !== document.body) {
+            const hasContainerClass = container.classList.toString().includes("Container");
+            const isInSidebar = container.closest('[class*="Sidebar"]') || container.closest('[class*="sidebar"]');
+            if (hasContainerClass || isInSidebar) {
+              const editLink = container.querySelector('a[href*="metadata/edit"]');
+              const badge = container.querySelector('div[class*="Badge"]');
+              if (editLink && badge) {
+                container.style.display = "none";
+                container.setAttribute("data-metadata-hidden", "true");
+                return;
+              }
+            }
+            container = container.parentElement;
+          }
+        }
+      });
+    };
+    const runHide = () => {
+      setTimeout(hideMetadataSection, 100);
+    };
+    runHide();
+    const observer = new MutationObserver(() => {
+      const alreadyHidden = document.querySelector('[data-metadata-hidden="true"]');
+      if (!alreadyHidden) {
+        runHide();
+      }
+    });
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+    return () => {
+      observer.disconnect();
+      const hidden = document.querySelector('[data-metadata-hidden="true"]');
+      if (hidden) {
+        hidden.style.display = "";
+        hidden.removeAttribute("data-metadata-hidden");
+      }
+    };
+  }, []);
+  return null;
+};
+adminSdk.defineWidgetConfig({
+  zone: "product.details.side.before"
+});
 const CONFIG_DOCS_URL = "https://docs.medusajs.com/admin/extension-points/widgets#product-details";
 const ProductMetadataTableWidget = ({ data }) => {
   const { data: descriptors = [], isPending, isError } = useProductMetadataConfig();
@@ -592,6 +990,14 @@ adminSdk.defineWidgetConfig({
 });
 const i18nTranslations0 = {};
 const widgetModule = { widgets: [
+  {
+    Component: CategoryMetadataTableWidget,
+    zone: ["product_category.details.after"]
+  },
+  {
+    Component: HideCategoryDefaultMetadataWidget,
+    zone: ["product_category.details.side.before"]
+  },
   {
     Component: HideDefaultMetadataWidget,
     zone: ["product.details.side.before"]