medusa-product-helper 0.0.18 → 0.0.20

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

@@ -146,7 +146,8 @@ const useMetadataConfig = (entity) => {
 };
 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 useOrderMetadataConfig = () => useMetadataConfig("order");
+const CONFIG_DOCS_URL$2 = "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) ?? {};
@@ -258,7 +259,7 @@ const CategoryMetadataTableWidget = ({ data }) => {
         "a",
         {
           className: "text-ui-fg-interactive underline",
-          href: CONFIG_DOCS_URL$1,
+          href: CONFIG_DOCS_URL$2,
           target: "_blank",
           rel: "noreferrer",
           children: "Learn how to configure it."
@@ -301,7 +302,7 @@ const CategoryMetadataTableWidget = ({ data }) => {
             ),
             /* @__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,
+                ValueField$2,
                 {
                   descriptor,
                   value,
@@ -342,7 +343,7 @@ const CategoryMetadataTableWidget = ({ data }) => {
     ] })
   ] });
 };
-const ValueField$1 = ({
+const ValueField$2 = ({
   descriptor,
   value,
   onStringChange,
@@ -593,6 +594,343 @@ const HideDefaultMetadataWidget = () => {
 adminSdk.defineWidgetConfig({
   zone: "product.details.side.before"
 });
+const CONFIG_DOCS_URL$1 = "https://docs.medusajs.com/admin/extension-points/widgets#order-details";
+const OrderMetadataTableWidget = ({ data }) => {
+  const { data: descriptors = [], isPending, isError } = useOrderMetadataConfig();
+  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/orders/${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.order.metadata;
+      setBaselineMetadata(nextMetadata);
+      setValues(buildInitialFormState(descriptors, nextMetadata));
+      ui.toast.success("Metadata saved");
+      await queryClient.invalidateQueries({
+        queryKey: ["orders"]
+      });
+    } 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 order 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: "order.details.after"
+});
 const CONFIG_DOCS_URL = "https://docs.medusajs.com/admin/extension-points/widgets#product-details";
 const ProductMetadataTableWidget = ({ data }) => {
   const { data: descriptors = [], isPending, isError } = useProductMetadataConfig();
@@ -1067,6 +1405,10 @@ const widgetModule = { widgets: [
     Component: HideDefaultMetadataWidget,
     zone: ["product.details.side.before"]
   },
+  {
+    Component: OrderMetadataTableWidget,
+    zone: ["order.details.after"]
+  },
   {
     Component: ProductMetadataTableWidget,
     zone: ["product.details.after"]