medusa-product-helper 0.0.3 → 0.0.5

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

@@ -1,5 +1,1011 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { defineWidgetConfig } from "@medusajs/admin-sdk";
+import { Container, Heading, Badge, Text, Skeleton, InlineTip, Button, Switch, Textarea, Input, toast } from "@medusajs/ui";
+import { useState, useEffect, useMemo, useRef } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+const METADATA_FIELD_TYPES = ["number", "text", "file", "bool"];
+const VALID_FIELD_TYPES = new Set(METADATA_FIELD_TYPES);
+function normalizeMetadataDescriptors(input) {
+  if (!Array.isArray(input)) {
+    return [];
+  }
+  const seenKeys = /* @__PURE__ */ new Set();
+  const normalized = [];
+  for (const item of input) {
+    if (!item || typeof item !== "object") {
+      continue;
+    }
+    const key = getNormalizedKey(item.key);
+    if (!key || seenKeys.has(key)) {
+      continue;
+    }
+    const type = getNormalizedType(item.type);
+    if (!type) {
+      continue;
+    }
+    const label = getNormalizedLabel(item.label);
+    const filterable = typeof item.filterable === "boolean" ? item.filterable : Boolean(item.filterable);
+    normalized.push({
+      key,
+      type,
+      ...label ? { label } : {},
+      ...filterable ? { filterable: true } : {}
+    });
+    seenKeys.add(key);
+  }
+  return normalized;
+}
+function buildInitialFormState(descriptors, metadata) {
+  return descriptors.reduce(
+    (acc, descriptor) => {
+      const currentValue = metadata && typeof metadata === "object" ? metadata[descriptor.key] : void 0;
+      acc[descriptor.key] = normalizeFormValue(descriptor, currentValue);
+      return acc;
+    },
+    {}
+  );
+}
+function buildMetadataPayload({
+  descriptors,
+  values,
+  originalMetadata
+}) {
+  const base = originalMetadata && typeof originalMetadata === "object" ? { ...originalMetadata } : {};
+  descriptors.forEach((descriptor) => {
+    const rawValue = values[descriptor.key];
+    const coerced = coerceMetadataValue(descriptor, rawValue);
+    if (typeof coerced === "undefined") {
+      delete base[descriptor.key];
+      return;
+    }
+    base[descriptor.key] = coerced;
+  });
+  return base;
+}
+function hasMetadataChanges({
+  descriptors,
+  values,
+  originalMetadata
+}) {
+  const next = buildMetadataPayload({ descriptors, values, originalMetadata });
+  const prev = originalMetadata && typeof originalMetadata === "object" ? originalMetadata : {};
+  return descriptors.some((descriptor) => {
+    const prevValue = prev[descriptor.key];
+    const nextValue = next[descriptor.key];
+    return !isDeepEqual(prevValue, nextValue);
+  });
+}
+function validateValueForDescriptor(descriptor, value) {
+  if (descriptor.type === "number") {
+    if (value === "" || value === null || typeof value === "undefined") {
+      return void 0;
+    }
+    const numericValue = typeof value === "number" ? value : Number(String(value).trim());
+    if (Number.isNaN(numericValue)) {
+      return "Enter a valid number";
+    }
+  }
+  if (descriptor.type === "file") {
+    if (!value) {
+      return void 0;
+    }
+    try {
+      new URL(String(value).trim());
+    } catch (err) {
+      return "Enter a valid URL";
+    }
+  }
+  return void 0;
+}
+function normalizeFormValue(descriptor, currentValue) {
+  if (descriptor.type === "bool") {
+    return Boolean(currentValue);
+  }
+  if ((descriptor.type === "number" || descriptor.type === "text") && typeof currentValue === "number") {
+    return currentValue.toString();
+  }
+  if (typeof currentValue === "string" || typeof currentValue === "number") {
+    return String(currentValue);
+  }
+  return "";
+}
+function coerceMetadataValue(descriptor, value) {
+  if (value === "" || value === null || typeof value === "undefined") {
+    return void 0;
+  }
+  if (descriptor.type === "bool") {
+    if (typeof value === "boolean") {
+      return value;
+    }
+    if (typeof value === "number") {
+      return value !== 0;
+    }
+    if (typeof value === "string") {
+      const normalized = value.trim().toLowerCase();
+      if (!normalized) {
+        return void 0;
+      }
+      if (["true", "1", "yes", "y", "on"].includes(normalized)) {
+        return true;
+      }
+      if (["false", "0", "no", "n", "off"].includes(normalized)) {
+        return false;
+      }
+    }
+    return Boolean(value);
+  }
+  if (descriptor.type === "number") {
+    if (typeof value === "number") {
+      return value;
+    }
+    const parsed = Number(String(value).trim());
+    return Number.isNaN(parsed) ? void 0 : parsed;
+  }
+  return String(value).trim();
+}
+function getNormalizedKey(value) {
+  if (typeof value !== "string") {
+    return null;
+  }
+  const trimmed = value.trim();
+  return trimmed.length ? trimmed : null;
+}
+function getNormalizedType(value) {
+  if (typeof value !== "string") {
+    return null;
+  }
+  const type = value.trim().toLowerCase();
+  return VALID_FIELD_TYPES.has(type) ? type : null;
+}
+function getNormalizedLabel(value) {
+  if (typeof value !== "string") {
+    return void 0;
+  }
+  const trimmed = value.trim();
+  return trimmed.length ? trimmed : void 0;
+}
+function isDeepEqual(a, b) {
+  if (a === b) {
+    return true;
+  }
+  if (typeof a === "object" && typeof b === "object" && a !== null && b !== null) {
+    const aKeys = Object.keys(a);
+    const bKeys = Object.keys(b);
+    if (aKeys.length !== bKeys.length) {
+      return false;
+    }
+    return aKeys.every(
+      (key) => isDeepEqual(
+        a[key],
+        b[key]
+      )
+    );
+  }
+  return false;
+}
+const CONFIG_ENDPOINT = "/admin/product-metadata-config";
+const QUERY_KEY = ["medusa-product-helper", "metadata-config"];
+const useMetadataConfig = (entity) => {
+  return useQuery({
+    queryKey: [...QUERY_KEY, entity],
+    queryFn: async () => {
+      const response = await fetch(`${CONFIG_ENDPOINT}?entity=${entity}`, {
+        credentials: "include"
+      });
+      if (!response.ok) {
+        throw new Error("Unable to load metadata configuration");
+      }
+      const payload = await response.json();
+      return normalizeMetadataDescriptors(payload.metadataDescriptors);
+    },
+    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] = useState(metadata);
+  const queryClient = useQueryClient();
+  useEffect(() => {
+    setBaselineMetadata(metadata);
+  }, [metadata]);
+  const initialState = useMemo(
+    () => buildInitialFormState(descriptors, baselineMetadata),
+    [descriptors, baselineMetadata]
+  );
+  const [values, setValues] = useState(
+    initialState
+  );
+  const [isSaving, setIsSaving] = useState(false);
+  useEffect(() => {
+    setValues(initialState);
+  }, [initialState]);
+  const errors = 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 = 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));
+      toast.success("Metadata saved");
+      await queryClient.invalidateQueries({
+        queryKey: ["product-categories"]
+      });
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Save failed");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Container, { className: "flex flex-col gap-y-4", children: [
+    /* @__PURE__ */ jsxs("header", { className: "flex flex-col gap-y-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
+        /* @__PURE__ */ jsx(Heading, { level: "h2", children: "Metadata" }),
+        /* @__PURE__ */ jsx(Badge, { size: "2xsmall", rounded: "full", children: descriptors.length })
+      ] }),
+      /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-subtle", children: "Structured metadata mapped to the keys you configured in the plugin options." })
+    ] }),
+    isPending ? /* @__PURE__ */ jsx(Skeleton, { className: "h-[160px] w-full" }) : isError ? /* @__PURE__ */ jsxs(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__ */ jsx("code", { children: "medusa-config.ts" }),
+      "."
+    ] }) : !descriptors.length ? /* @__PURE__ */ jsxs(InlineTip, { variant: "info", label: "No configured metadata keys", children: [
+      "Provide a ",
+      /* @__PURE__ */ jsx("code", { children: "metadataDescriptors" }),
+      " array in the plugin options to control which keys show up here.",
+      " ",
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          className: "text-ui-fg-interactive underline",
+          href: CONFIG_DOCS_URL$1,
+          target: "_blank",
+          rel: "noreferrer",
+          children: "Learn how to configure it."
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-lg border border-ui-border-base", children: /* @__PURE__ */ jsxs("table", { className: "min-w-full divide-y divide-ui-border-base", children: [
+        /* @__PURE__ */ jsx("thead", { className: "bg-ui-bg-subtle", children: /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx(
+              "th",
+              {
+                scope: "row",
+                className: "txt-compact-medium text-ui-fg-base align-top px-4 py-4",
+                children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-1", children: [
+                  /* @__PURE__ */ jsx("span", { children: descriptor.label ?? descriptor.key }),
+                  /* @__PURE__ */ jsx("span", { className: "txt-compact-xsmall-plus text-ui-fg-muted uppercase tracking-wide", children: descriptor.type })
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsx("td", { className: "align-top px-4 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-2", children: [
+              /* @__PURE__ */ jsx(
+                ValueField$1,
+                {
+                  descriptor,
+                  value,
+                  onStringChange: handleStringChange,
+                  onBooleanChange: handleBooleanChange
+                }
+              ),
+              error && /* @__PURE__ */ jsx(Text, { className: "txt-compact-small text-ui-fg-error", children: error })
+            ] }) })
+          ] }, descriptor.key);
+        }) })
+      ] }) }),
+      /* @__PURE__ */ 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__ */ jsx(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__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "secondary",
+              size: "small",
+              disabled: !isDirty || isSaving,
+              onClick: handleReset,
+              children: "Reset"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "small",
+              onClick: handleSubmit,
+              disabled: !isDirty || hasErrors || isSaving,
+              isLoading: isSaving,
+              children: "Save metadata"
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+};
+const ValueField$1 = ({
+  descriptor,
+  value,
+  onStringChange,
+  onBooleanChange
+}) => {
+  const fileInputRef = useRef(null);
+  const [isUploading, setIsUploading] = 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);
+          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) {
+      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__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+      /* @__PURE__ */ jsx(
+        Switch,
+        {
+          checked: Boolean(value),
+          onCheckedChange: (checked) => onBooleanChange(descriptor.key, Boolean(checked)),
+          "aria-label": `Toggle ${descriptor.label ?? descriptor.key}`
+        }
+      ),
+      /* @__PURE__ */ jsx(Text, { className: "txt-compact-small text-ui-fg-muted", children: Boolean(value) ? "True" : "False" })
+    ] });
+  }
+  if (descriptor.type === "text") {
+    return /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        value: value ?? "",
+        placeholder: "Enter text",
+        rows: 3,
+        onChange: (event) => onStringChange(descriptor.key, event.target.value)
+      }
+    );
+  }
+  if (descriptor.type === "number") {
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        type: "text",
+        inputMode: "decimal",
+        placeholder: "0.00",
+        value: value ?? "",
+        onChange: (event) => onStringChange(descriptor.key, event.target.value)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "url",
+          placeholder: "https://example.com/file",
+          value: value ?? "",
+          onChange: (event) => onStringChange(descriptor.key, event.target.value),
+          className: "flex-1"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: fileInputRef,
+          type: "file",
+          className: "hidden",
+          onChange: handleFileUpload,
+          disabled: isUploading,
+          "aria-label": `Upload file for ${descriptor.label ?? descriptor.key}`
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        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__ */ jsx(
+      "a",
+      {
+        className: "txt-compact-small-plus text-ui-fg-interactive underline",
+        href: value,
+        target: "_blank",
+        rel: "noreferrer",
+        children: "View file"
+      }
+    )
+  ] });
+};
+defineWidgetConfig({
+  zone: "product_category.details.after"
+});
+const HideCategoryDefaultMetadataWidget = () => {
+  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;
+};
+defineWidgetConfig({
+  zone: "product_category.details.side.before"
+});
+const HideDefaultMetadataWidget = () => {
+  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;
+};
+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();
+  const metadata = (data == null ? void 0 : data.metadata) ?? {};
+  const [baselineMetadata, setBaselineMetadata] = useState(metadata);
+  const queryClient = useQueryClient();
+  useEffect(() => {
+    setBaselineMetadata(metadata);
+  }, [metadata]);
+  const initialState = useMemo(
+    () => buildInitialFormState(descriptors, baselineMetadata),
+    [descriptors, baselineMetadata]
+  );
+  const [values, setValues] = useState(
+    initialState
+  );
+  const [isSaving, setIsSaving] = useState(false);
+  useEffect(() => {
+    setValues(initialState);
+  }, [initialState]);
+  const errors = 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 = 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/products/${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.metadata;
+      setBaselineMetadata(nextMetadata);
+      setValues(buildInitialFormState(descriptors, nextMetadata));
+      toast.success("Metadata saved");
+      await queryClient.invalidateQueries({
+        queryKey: ["products"]
+      });
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Save failed");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Container, { className: "flex flex-col gap-y-4", children: [
+    /* @__PURE__ */ jsxs("header", { className: "flex flex-col gap-y-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-3", children: [
+        /* @__PURE__ */ jsx(Heading, { level: "h2", children: "Metadata" }),
+        /* @__PURE__ */ jsx(Badge, { size: "2xsmall", rounded: "full", children: descriptors.length })
+      ] }),
+      /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-subtle", children: "Structured metadata mapped to the keys you configured in the plugin options." })
+    ] }),
+    isPending ? /* @__PURE__ */ jsx(Skeleton, { className: "h-[160px] w-full" }) : isError ? /* @__PURE__ */ jsxs(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__ */ jsx("code", { children: "medusa-config.ts" }),
+      "."
+    ] }) : !descriptors.length ? /* @__PURE__ */ jsxs(InlineTip, { variant: "info", label: "No configured metadata keys", children: [
+      "Provide a ",
+      /* @__PURE__ */ jsx("code", { children: "metadataDescriptors" }),
+      " array in the plugin options to control which keys show up here.",
+      " ",
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          className: "text-ui-fg-interactive underline",
+          href: CONFIG_DOCS_URL,
+          target: "_blank",
+          rel: "noreferrer",
+          children: "Learn how to configure it."
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-lg border border-ui-border-base", children: /* @__PURE__ */ jsxs("table", { className: "min-w-full divide-y divide-ui-border-base", children: [
+        /* @__PURE__ */ jsx("thead", { className: "bg-ui-bg-subtle", children: /* @__PURE__ */ jsxs("tr", { children: [
+          /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx(
+              "th",
+              {
+                scope: "row",
+                className: "txt-compact-medium text-ui-fg-base align-top px-4 py-4",
+                children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-1", children: [
+                  /* @__PURE__ */ jsx("span", { children: descriptor.label ?? descriptor.key }),
+                  /* @__PURE__ */ jsx("span", { className: "txt-compact-xsmall-plus text-ui-fg-muted uppercase tracking-wide", children: descriptor.type })
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsx("td", { className: "align-top px-4 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-2", children: [
+              /* @__PURE__ */ jsx(
+                ValueField,
+                {
+                  descriptor,
+                  value,
+                  onStringChange: handleStringChange,
+                  onBooleanChange: handleBooleanChange
+                }
+              ),
+              error && /* @__PURE__ */ jsx(Text, { className: "txt-compact-small text-ui-fg-error", children: error })
+            ] }) })
+          ] }, descriptor.key);
+        }) })
+      ] }) }),
+      /* @__PURE__ */ 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__ */ jsx(Text, { className: "text-ui-fg-muted", children: "Changes are stored on the product metadata object. Clearing a field removes the corresponding key on save." }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "secondary",
+              size: "small",
+              disabled: !isDirty || isSaving,
+              onClick: handleReset,
+              children: "Reset"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "small",
+              onClick: handleSubmit,
+              disabled: !isDirty || hasErrors || isSaving,
+              isLoading: isSaving,
+              children: "Save metadata"
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+};
+const ValueField = ({
+  descriptor,
+  value,
+  onStringChange,
+  onBooleanChange
+}) => {
+  const fileInputRef = useRef(null);
+  const [isUploading, setIsUploading] = 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);
+          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) {
+      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__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+      /* @__PURE__ */ jsx(
+        Switch,
+        {
+          checked: Boolean(value),
+          onCheckedChange: (checked) => onBooleanChange(descriptor.key, Boolean(checked)),
+          "aria-label": `Toggle ${descriptor.label ?? descriptor.key}`
+        }
+      ),
+      /* @__PURE__ */ jsx(Text, { className: "txt-compact-small text-ui-fg-muted", children: Boolean(value) ? "True" : "False" })
+    ] });
+  }
+  if (descriptor.type === "text") {
+    return /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        value: value ?? "",
+        placeholder: "Enter text",
+        rows: 3,
+        onChange: (event) => onStringChange(descriptor.key, event.target.value)
+      }
+    );
+  }
+  if (descriptor.type === "number") {
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        type: "text",
+        inputMode: "decimal",
+        placeholder: "0.00",
+        value: value ?? "",
+        onChange: (event) => onStringChange(descriptor.key, event.target.value)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "url",
+          placeholder: "https://example.com/file",
+          value: value ?? "",
+          onChange: (event) => onStringChange(descriptor.key, event.target.value),
+          className: "flex-1"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: fileInputRef,
+          type: "file",
+          className: "hidden",
+          onChange: handleFileUpload,
+          disabled: isUploading,
+          "aria-label": `Upload file for ${descriptor.label ?? descriptor.key}`
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        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__ */ jsx(
+      "a",
+      {
+        className: "txt-compact-small-plus text-ui-fg-interactive underline",
+        href: value,
+        target: "_blank",
+        rel: "noreferrer",
+        children: "View file"
+      }
+    )
+  ] });
+};
+defineWidgetConfig({
+  zone: "product.details.after"
+});
 const i18nTranslations0 = {};
-const widgetModule = { widgets: [] };
+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"]
+  },
+  {
+    Component: ProductMetadataTableWidget,
+    zone: ["product.details.after"]
+  }
+] };
 const routeModule = {
   routes: []
 };