@hartl-services/medusa-base 2.5.0 → 2.6.1

package/.medusa/server/src/admin/admin-components/features/plugin-features/components/ImageSettingInput.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Hint, Text } from "@medusajs/ui";
+import { useMutation } from "@tanstack/react-query";
+import { useState } from "react";
+import { texts } from "../../../i18n/texts";
+import { validateFile } from "../../../shared/lib/file-validation";
+import { sdk } from "../../../shared/lib/sdk";
+import { FilePickerButton } from "../../../shared/ui/FilePickerButton";
+/** Largest image an `image` setting accepts in the Admin. */
+const SETTING_IMAGE_MAX_BYTES = 2 * 1024 * 1024;
+const SETTING_IMAGE_OPTIONS = {
+    maxBytes: SETTING_IMAGE_MAX_BYTES,
+    // Gmail and Outlook do not display SVG or WebP in e-mails.
+    types: ["image/png", "image/jpeg"],
+    messages: {
+        wrongType: "Bitte eine PNG- oder JPG-Datei auswählen.",
+        empty: "Die Bilddatei ist leer.",
+        tooLarge: "Die Bilddatei darf maximal 2 MiB groß sein.",
+    },
+};
+/**
+ * Uploads an image to the public File Module storage and hands its URL to
+ * the settings draft; the form stores it on save like any other value.
+ */
+export const ImageSettingInput = ({ id, hintId, label, value, disabled, onChange, }) => {
+    const [error, setError] = useState(null);
+    const upload = useMutation({
+        mutationFn: async (file) => {
+            const { files } = await sdk.admin.upload.create({ files: [file] });
+            const url = files[0]?.url;
+            if (!url) {
+                throw new Error("upload returned no file");
+            }
+            return url;
+        },
+        onSuccess: (url) => onChange(url),
+        onError: () => setError(texts.settings.imageUploadFailed),
+    });
+    const busy = disabled || upload.isPending;
+    const selectFile = (file) => {
+        const invalid = validateFile(file, SETTING_IMAGE_OPTIONS);
+        setError(invalid);
+        if (!invalid) {
+            upload.mutate(file);
+        }
+    };
+    return (_jsxs("div", { className: "grid gap-2", children: [value && (_jsx("div", { className: "bg-ui-bg-subtle flex items-center justify-center rounded-md border p-4", children: _jsx("img", { src: value, alt: texts.settings.imagePreviewAlt(label), className: "max-h-24 max-w-full object-contain" }) })), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(FilePickerButton, { id: id, "aria-describedby": hintId, accept: "image/png,image/jpeg", label: value ? texts.settings.imageReplace : texts.settings.imageUpload, isLoading: upload.isPending, disabled: busy, onFileSelected: selectFile }), value && (_jsx(Button, { type: "button", size: "small", variant: "transparent", disabled: busy, onClick: () => onChange(""), children: texts.settings.imageRemove })), !value && (_jsx(Text, { size: "small", className: "text-ui-fg-muted", children: texts.settings.imageNone }))] }), error && _jsx(Hint, { variant: "error", children: error })] }));
+};

package/{dist → .medusa/server/src/admin}/admin-components/features/plugin-features/components/PluginActionsSection.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Container, Heading, Text, toast, usePrompt } from "@medusajs/ui";
+import { Button, Container, Text, toast, usePrompt } from "@medusajs/ui";
 import { useEffect, useRef } from "react";
 import { texts } from "../../../i18n/texts";
+import { SectionHeader } from "../../../shared/ui/SectionHeader";
 import { useLatestPluginActionRun, useRunPluginAction, } from "../hooks/usePluginFeatures";
 import { formatRunTime, progressCount, progressPercent, runTransition, summarizeActionResult, } from "../lib/action-runs";
 /** Progress of a running run: label, "current / total", bar and start time. */
@@ -62,5 +63,5 @@ export const PluginActionsSection = ({ plugin }) => {
         }
         mutation.mutate(action);
     };
-    return (_jsxs(Container, { className: "divide-y p-0", children: [_jsx("div", { className: "px-6 py-4", children: _jsx(Heading, { level: "h2", children: texts.sections.actions }) }), plugin.actions.map((action) => (_jsx(PluginActionRow, { pluginKey: plugin.plugin_key, action: action, starting: startingKey === action.key, blocked: mutation.isPending && startingKey !== action.key, onRun: (entry) => void run(entry) }, action.key)))] }));
+    return (_jsxs(Container, { className: "divide-y p-0", children: [_jsx(SectionHeader, { title: texts.sections.actions }), plugin.actions.map((action) => (_jsx(PluginActionRow, { pluginKey: plugin.plugin_key, action: action, starting: startingKey === action.key, blocked: mutation.isPending && startingKey !== action.key, onRun: (entry) => void run(entry) }, action.key)))] }));
 };

package/.medusa/server/src/admin/admin-components/features/plugin-features/components/PluginFeaturesSettingsPage.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Container, Text } from "@medusajs/ui";
+import { texts } from "../../../i18n/texts";
+import { SectionHeader } from "../../../shared/ui/SectionHeader";
+import { usePluginFeatures } from "../hooks/usePluginFeatures";
+import { PluginHubCard } from "./PluginHubCard";
+/**
+ * Hub: one card per installed plugin. Plugins that cannot be switched off
+ * (the shop master data) come first; the rest keep the server's order.
+ */
+export const PluginFeaturesSettingsPage = () => {
+    const query = usePluginFeatures();
+    return (_jsxs("div", { className: "flex flex-col gap-y-3", children: [_jsx(Container, { className: "p-0", children: _jsx(SectionHeader, { description: texts.page.description, level: "h1", title: texts.page.title }) }), query.isPending ? (_jsx(Container, { children: _jsx(Text, { className: "text-ui-fg-subtle", children: texts.states.loading }) })) : query.isError ? (_jsxs(Container, { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsx(Text, { className: "text-ui-fg-error", children: texts.states.error }), _jsx(Button, { size: "small", variant: "secondary", isLoading: query.isFetching, onClick: () => void query.refetch(), children: texts.states.retry })] })) : query.data.plugins.length === 0 ? (_jsx(Container, { children: _jsx(Text, { className: "text-ui-fg-subtle", children: texts.states.empty }) })) : ([
+                ...query.data.plugins.filter((plugin) => !plugin.switchable),
+                ...query.data.plugins.filter((plugin) => plugin.switchable),
+            ].map((plugin) => (_jsx(PluginHubCard, { plugin: plugin }, plugin.plugin_key))))] }));
+};

package/.medusa/server/src/admin/admin-components/features/plugin-features/components/PluginPageShell.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, Container, Heading, Text } from "@medusajs/ui";
+import { texts } from "../../../i18n/texts";
+import { BackLink } from "../../../shared/ui/BackLink";
+import { usePluginFeature } from "../hooks/usePluginFeatures";
+import { PLUGIN_HUB_PATH } from "../lib/plugin-paths";
+import { PluginStatusChips } from "./PluginStatusChips";
+const isNotFound = (error) => typeof error === "object" &&
+    error !== null &&
+    error.status === 404;
+/**
+ * Frame of a plugin's page: back link to the hub, the plugin's label,
+ * description and status, then `children`. Shows loading, not-installed and
+ * error states instead of `children`.
+ */
+export const PluginPageShell = ({ pluginKey, children }) => {
+    const query = usePluginFeature(pluginKey);
+    const plugin = query.data?.plugin;
+    return (_jsxs("div", { className: "flex flex-col gap-y-3", children: [_jsx(BackLink, { label: texts.detail.back, to: PLUGIN_HUB_PATH }), plugin ? (_jsxs(_Fragment, { children: [_jsxs(Container, { className: "px-6 py-4", children: [_jsx(Heading, { level: "h1", children: plugin.label }), plugin.description && (_jsx(Text, { className: "text-ui-fg-subtle", children: plugin.description })), _jsx(PluginStatusChips, { plugin: plugin })] }), children] })) : query.isPending ? (_jsx(Container, { children: _jsx(Text, { className: "text-ui-fg-subtle", children: texts.states.loading }) })) : isNotFound(query.error) ? (_jsx(Container, { children: _jsx(Text, { className: "text-ui-fg-subtle", children: texts.states.notFound }) })) : (_jsxs(Container, { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsx(Text, { className: "text-ui-fg-error", children: texts.states.error }), _jsx(Button, { size: "small", variant: "secondary", isLoading: query.isFetching, onClick: () => void query.refetch(), children: texts.states.retry })] }))] }));
+};

package/{dist → .medusa/server/src/admin}/admin-components/features/plugin-features/components/PluginSettingsForm.js

@@ -1,6 +1,7 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Alert, Button, Container, Heading, Hint, Input, Label, Select, Switch, Text, } from "@medusajs/ui";
 import { texts } from "../../../i18n/texts";
+import { groupSettings, isHexColor, normalizeColorInput, } from "../lib/settings-draft";
 import { usePluginSettingsForm } from "../hooks/usePluginSettingsForm";
 import { ImageSettingInput } from "./ImageSettingInput";
 const fieldId = (pluginKey, key) => `plugin-setting-${pluginKey}-${key}`;
@@ -19,6 +20,13 @@ const boundsText = (setting) => setting.min !== null && setting.max !== null
         : setting.max !== null
             ? texts.settings.numberMax(setting.max)
             : undefined;
+const ColorSettingInput = ({ id, hintId, label, value, invalid, disabled, onChange, }) => {
+    const hasColor = isHexColor(value.trim());
+    return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { id: id, "aria-describedby": hintId, "aria-invalid": invalid, className: "flex-1 font-mono", type: "text", autoComplete: "off", spellCheck: false, placeholder: texts.settings.colorPlaceholder, value: value, disabled: disabled, onChange: (event) => onChange(normalizeColorInput(event.target.value)) }), _jsx("input", { type: "color", "aria-label": texts.settings.colorPickLabel(label), 
+                // An empty value shows the browser's black; dim it so it does not
+                // read as a chosen color.
+                className: `h-8 w-10 shrink-0 cursor-pointer rounded-md border border-ui-border-base bg-ui-bg-field p-1 disabled:cursor-not-allowed ${hasColor ? "" : "opacity-30"}`, value: hasColor ? value.trim() : "#000000", disabled: disabled, onChange: (event) => onChange(normalizeColorInput(event.target.value)) })] }));
+};
 const SettingField = ({ pluginKey, setting, invalidatesLabels, value, invalid, disabled, onChange, }) => {
     const id = fieldId(pluginKey, setting.key);
     const hintId = `${id}-hint`;
@@ -28,14 +36,19 @@ const SettingField = ({ pluginKey, setting, invalidatesLabels, value, invalid, d
                             ? texts.settings.secretClearUndoLabel(setting.label)
                             : texts.settings.secretClearLabel(setting.label), onClick: () => onChange(clearPending ? "" : null), children: clearPending
                             ? texts.settings.secretClearUndo
-                            : texts.settings.secretClear }))] })) : setting.type === "select" ? (_jsxs(Select, { value: typeof value === "string" ? value : "", disabled: disabled, onValueChange: (next) => onChange(next), children: [_jsx(Select.Trigger, { id: id, "aria-describedby": hintId, children: _jsx(Select.Value, { placeholder: texts.settings.selectPlaceholder }) }), _jsx(Select.Content, { children: setting.options.map((option) => (_jsx(Select.Item, { value: option.value, children: option.label }, option.value))) })] })) : setting.type === "image" ? (_jsx(ImageSettingInput, { id: id, hintId: hintId, label: setting.label, value: typeof value === "string" ? value : "", disabled: disabled, onChange: (url) => onChange(url) })) : setting.type === "number" ? (_jsx(Input, { id: id, "aria-describedby": hintId, "aria-invalid": invalid, type: "number", step: "any", min: setting.min ?? undefined, max: setting.max ?? undefined, value: typeof value === "string" ? value : "", disabled: disabled, onChange: (event) => onChange(event.target.value, event.target.validity.badInput) })) : (_jsx(Input, { id: id, "aria-describedby": hintId, "aria-invalid": invalid, type: setting.type === "url" ? "url" : "text", value: typeof value === "string" ? value : "", disabled: disabled, onChange: (event) => onChange(event.target.value) })), _jsxs("div", { id: hintId, className: "grid gap-1", children: [setting.description && (_jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: setting.description })), clearPending && (_jsx(Hint, { variant: "info", children: texts.settings.secretClearPending })), invalidatesLabels && (_jsx(Text, { size: "small", className: "text-ui-fg-muted", children: texts.settings.invalidates(invalidatesLabels) })), bounds && !invalid && (_jsx(Text, { size: "small", className: "text-ui-fg-muted", children: bounds })), invalid && (_jsx(Hint, { variant: "error", children: bounds ?? texts.settings.invalidNumber }))] })] }));
+                            : texts.settings.secretClear }))] })) : setting.type === "select" ? (_jsxs(Select, { value: typeof value === "string" ? value : "", disabled: disabled, onValueChange: (next) => onChange(next), children: [_jsx(Select.Trigger, { id: id, "aria-describedby": hintId, children: _jsx(Select.Value, { placeholder: texts.settings.selectPlaceholder }) }), _jsx(Select.Content, { children: setting.options.map((option) => (_jsx(Select.Item, { value: option.value, children: option.label }, option.value))) })] })) : setting.type === "image" ? (_jsx(ImageSettingInput, { id: id, hintId: hintId, label: setting.label, value: typeof value === "string" ? value : "", disabled: disabled, onChange: (url) => onChange(url) })) : setting.type === "color" ? (_jsx(ColorSettingInput, { id: id, hintId: hintId, label: setting.label, value: typeof value === "string" ? value : "", invalid: invalid, disabled: disabled, onChange: (next) => onChange(next) })) : setting.type === "number" ? (_jsx(Input, { id: id, "aria-describedby": hintId, "aria-invalid": invalid, type: "number", step: "any", min: setting.min ?? undefined, max: setting.max ?? undefined, value: typeof value === "string" ? value : "", disabled: disabled, onChange: (event) => onChange(event.target.value, event.target.validity.badInput) })) : (_jsx(Input, { id: id, "aria-describedby": hintId, "aria-invalid": invalid, type: setting.type === "url" ? "url" : "text", value: typeof value === "string" ? value : "", disabled: disabled, onChange: (event) => onChange(event.target.value) })), _jsxs("div", { id: hintId, className: "grid gap-1", children: [setting.description && (_jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: setting.description })), clearPending && (_jsx(Hint, { variant: "info", children: texts.settings.secretClearPending })), invalidatesLabels && (_jsx(Text, { size: "small", className: "text-ui-fg-muted", children: texts.settings.invalidates(invalidatesLabels) })), bounds && !invalid && (_jsx(Text, { size: "small", className: "text-ui-fg-muted", children: bounds })), invalid && (_jsx(Hint, { variant: "error", children: setting.type === "color"
+                            ? texts.settings.invalidColor
+                            : (bounds ?? texts.settings.invalidNumber) }))] })] }));
 };
 export const PluginSettingsForm = ({ plugin }) => {
     const form = usePluginSettingsForm(plugin);
     const pending = form.mutation.isPending;
+    const sections = groupSettings(plugin.settings);
     const hasTextFields = plugin.settings.some((setting) => setting.type !== "boolean" &&
         setting.type !== "secret" &&
         setting.type !== "select" &&
         setting.type !== "image");
-    return (_jsxs(Container, { className: "divide-y p-0", "aria-busy": pending, children: [_jsxs("div", { className: "px-6 py-4", children: [_jsx(Heading, { level: "h2", children: texts.sections.settings }), hasTextFields && (_jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: texts.settings.clearHint }))] }), _jsxs("form", { onSubmit: form.submit, className: "grid gap-5 px-6 py-5", children: [!plugin.configured && (_jsx(Alert, { variant: "warning", children: texts.settings.missing(missingLabels(plugin)) })), plugin.settings.map((setting) => (_jsx(SettingField, { pluginKey: plugin.plugin_key, setting: setting, invalidatesLabels: invalidatesLabels(plugin, setting), value: form.draft[setting.key], invalid: form.invalid.includes(setting.key), disabled: pending, onChange: (value, badInput) => form.setValue(setting.key, value, badInput) }, setting.key))), _jsx("div", { className: "flex justify-end", children: _jsx(Button, { type: "submit", size: "small", isLoading: pending, disabled: !form.dirty || form.invalid.length > 0 || pending, children: texts.settings.save }) })] })] }));
+    return (_jsxs(Container, { className: "divide-y p-0", "aria-busy": pending, children: [_jsxs("div", { className: "px-6 py-4", children: [_jsx(Heading, { level: "h2", children: texts.sections.settings }), hasTextFields && (_jsx(Text, { size: "small", className: "text-ui-fg-subtle", children: texts.settings.clearHint }))] }), _jsxs("form", { onSubmit: form.submit, className: "grid gap-5 px-6 py-5", children: [!plugin.configured && (_jsx(Alert, { variant: "warning", children: texts.settings.missing(missingLabels(plugin)) })), sections.map((section, index) => (_jsxs("div", { className: section.group !== null && index > 0
+                            ? "grid gap-5 border-t border-ui-border-base pt-5"
+                            : "grid gap-5", children: [section.group !== null && (_jsx(Heading, { level: "h3", children: section.group })), section.settings.map((setting) => (_jsx(SettingField, { pluginKey: plugin.plugin_key, setting: setting, invalidatesLabels: invalidatesLabels(plugin, setting), value: form.draft[setting.key], invalid: form.invalid.includes(setting.key), disabled: pending, onChange: (value, badInput) => form.setValue(setting.key, value, badInput) }, setting.key)))] }, section.settings[0].key))), _jsx("div", { className: "flex justify-end", children: _jsx(Button, { type: "submit", size: "small", isLoading: pending, disabled: !form.dirty || form.invalid.length > 0 || pending, children: texts.settings.save }) })] })] }));
 };

package/{dist → .medusa/server/src/admin}/admin-components/features/plugin-features/hooks/usePluginFeatureEnabled.d.ts

@@ -41,6 +41,7 @@ export declare const pluginFeatureEnabledQueryOptions: (pluginKey: string, featu
                 key: string;
                 label: string;
                 description: string | null;
+                group: string | null;
                 required: boolean;
                 is_set: boolean;
                 source: "default" | "stored" | "config" | "none";
@@ -56,6 +57,7 @@ export declare const pluginFeatureEnabledQueryOptions: (pluginKey: string, featu
                 key: string;
                 label: string;
                 description: string | null;
+                group: string | null;
                 required: boolean;
                 is_set: boolean;
                 source: "default" | "stored" | "config" | "none";
@@ -69,17 +71,19 @@ export declare const pluginFeatureEnabledQueryOptions: (pluginKey: string, featu
                 key: string;
                 label: string;
                 description: string | null;
+                group: string | null;
                 required: boolean;
                 is_set: boolean;
                 source: "default" | "stored" | "config" | "none";
                 invalidates: string[];
             } | {
-                type: "string" | "boolean" | "url" | "image";
+                type: "string" | "boolean" | "color" | "url" | "image";
                 default: string | number | boolean | null;
                 value: string | number | boolean | null;
                 key: string;
                 label: string;
                 description: string | null;
+                group: string | null;
                 required: boolean;
                 is_set: boolean;
                 source: "default" | "stored" | "config" | "none";

package/{dist → .medusa/server/src/admin}/admin-components/features/plugin-features/hooks/usePluginFeatures.d.ts

@@ -21,6 +21,7 @@ export declare function usePluginFeatures(): import("@tanstack/react-query").Use
             key: string;
             label: string;
             description: string | null;
+            group: string | null;
             required: boolean;
             is_set: boolean;
             source: "default" | "stored" | "config" | "none";
@@ -36,6 +37,7 @@ export declare function usePluginFeatures(): import("@tanstack/react-query").Use
             key: string;
             label: string;
             description: string | null;
+            group: string | null;
             required: boolean;
             is_set: boolean;
             source: "default" | "stored" | "config" | "none";
@@ -49,17 +51,19 @@ export declare function usePluginFeatures(): import("@tanstack/react-query").Use
             key: string;
             label: string;
             description: string | null;
+            group: string | null;
             required: boolean;
             is_set: boolean;
             source: "default" | "stored" | "config" | "none";
             invalidates: string[];
         } | {
-            type: "string" | "boolean" | "url" | "image";
+            type: "string" | "boolean" | "color" | "url" | "image";
             default: string | number | boolean | null;
             value: string | number | boolean | null;
             key: string;
             label: string;
             description: string | null;
+            group: string | null;
             required: boolean;
             is_set: boolean;
             source: "default" | "stored" | "config" | "none";
@@ -108,6 +112,7 @@ export declare function usePluginFeature(pluginKey: string | undefined): import(
             key: string;
             label: string;
             description: string | null;
+            group: string | null;
             required: boolean;
             is_set: boolean;
             source: "default" | "stored" | "config" | "none";
@@ -123,6 +128,7 @@ export declare function usePluginFeature(pluginKey: string | undefined): import(
             key: string;
             label: string;
             description: string | null;
+            group: string | null;
             required: boolean;
             is_set: boolean;
             source: "default" | "stored" | "config" | "none";
@@ -136,17 +142,19 @@ export declare function usePluginFeature(pluginKey: string | undefined): import(
             key: string;
             label: string;
             description: string | null;
+            group: string | null;
             required: boolean;
             is_set: boolean;
             source: "default" | "stored" | "config" | "none";
             invalidates: string[];
         } | {
-            type: "string" | "boolean" | "url" | "image";
+            type: "string" | "boolean" | "color" | "url" | "image";
             default: string | number | boolean | null;
             value: string | number | boolean | null;
             key: string;
             label: string;
             description: string | null;
+            group: string | null;
             required: boolean;
             is_set: boolean;
             source: "default" | "stored" | "config" | "none";
@@ -189,6 +197,7 @@ export declare function useUpdatePluginFeatures(): import("@tanstack/react-query
             key: string;
             label: string;
             description: string | null;
+            group: string | null;
             required: boolean;
             is_set: boolean;
             source: "default" | "stored" | "config" | "none";
@@ -204,6 +213,7 @@ export declare function useUpdatePluginFeatures(): import("@tanstack/react-query
             key: string;
             label: string;
             description: string | null;
+            group: string | null;
             required: boolean;
             is_set: boolean;
             source: "default" | "stored" | "config" | "none";
@@ -217,17 +227,19 @@ export declare function useUpdatePluginFeatures(): import("@tanstack/react-query
             key: string;
             label: string;
             description: string | null;
+            group: string | null;
             required: boolean;
             is_set: boolean;
             source: "default" | "stored" | "config" | "none";
             invalidates: string[];
         } | {
-            type: "string" | "boolean" | "url" | "image";
+            type: "string" | "boolean" | "color" | "url" | "image";
             default: string | number | boolean | null;
             value: string | number | boolean | null;
             key: string;
             label: string;
             description: string | null;
+            group: string | null;
             required: boolean;
             is_set: boolean;
             source: "default" | "stored" | "config" | "none";
@@ -274,6 +286,7 @@ export declare function useUpdatePluginSettings(pluginKey: string): import("@tan
             key: string;
             label: string;
             description: string | null;
+            group: string | null;
             required: boolean;
             is_set: boolean;
             source: "default" | "stored" | "config" | "none";
@@ -289,6 +302,7 @@ export declare function useUpdatePluginSettings(pluginKey: string): import("@tan
             key: string;
             label: string;
             description: string | null;
+            group: string | null;
             required: boolean;
             is_set: boolean;
             source: "default" | "stored" | "config" | "none";
@@ -302,17 +316,19 @@ export declare function useUpdatePluginSettings(pluginKey: string): import("@tan
             key: string;
             label: string;
             description: string | null;
+            group: string | null;
             required: boolean;
             is_set: boolean;
             source: "default" | "stored" | "config" | "none";
             invalidates: string[];
         } | {
-            type: "string" | "boolean" | "url" | "image";
+            type: "string" | "boolean" | "color" | "url" | "image";
             default: string | number | boolean | null;
             value: string | number | boolean | null;
             key: string;
             label: string;
             description: string | null;
+            group: string | null;
             required: boolean;
             is_set: boolean;
             source: "default" | "stored" | "config" | "none";

package/{dist → .medusa/server/src/admin}/admin-components/features/plugin-features/hooks/usePluginFeatures.js

@@ -1,7 +1,7 @@
 import { toast } from "@medusajs/ui";
 import { useMutation, useQuery, useQueryClient, } from "@tanstack/react-query";
 import { texts } from "../../../i18n/texts";
-import { getErrorMessage } from "../../../lib/errors";
+import { getErrorMessage } from "../../../shared/lib/errors";
 import { listPluginActionRuns, listPluginFeatures, retrievePluginFeatures, runPluginAction, updatePluginFeatures, updatePluginSettings, } from "../lib/plugin-features-admin-client";
 import { pluginFeatureKeys } from "../queries/pluginFeatureKeys";
 const isConflict = (error) => typeof error === "object" &&

package/{dist → .medusa/server/src/admin}/admin-components/features/plugin-features/hooks/usePluginSettingsForm.d.ts

@@ -30,6 +30,7 @@ export declare function usePluginSettingsForm(plugin: AdminPluginFeatures): {
                 key: string;
                 label: string;
                 description: string | null;
+                group: string | null;
                 required: boolean;
                 is_set: boolean;
                 source: "default" | "stored" | "config" | "none";
@@ -45,6 +46,7 @@ export declare function usePluginSettingsForm(plugin: AdminPluginFeatures): {
                 key: string;
                 label: string;
                 description: string | null;
+                group: string | null;
                 required: boolean;
                 is_set: boolean;
                 source: "default" | "stored" | "config" | "none";
@@ -58,17 +60,19 @@ export declare function usePluginSettingsForm(plugin: AdminPluginFeatures): {
                 key: string;
                 label: string;
                 description: string | null;
+                group: string | null;
                 required: boolean;
                 is_set: boolean;
                 source: "default" | "stored" | "config" | "none";
                 invalidates: string[];
             } | {
-                type: "string" | "boolean" | "url" | "image";
+                type: "string" | "boolean" | "color" | "url" | "image";
                 default: string | number | boolean | null;
                 value: string | number | boolean | null;
                 key: string;
                 label: string;
                 description: string | null;
+                group: string | null;
                 required: boolean;
                 is_set: boolean;
                 source: "default" | "stored" | "config" | "none";

package/{dist → .medusa/server/src/admin}/admin-components/features/plugin-features/lib/action-runs.d.ts

@@ -9,7 +9,7 @@ export declare const summarizeActionResult: (result: unknown) => string | null;
 export declare const progressPercent: (progress: PluginActionRunProgress | null) => number | null;
 /** "3 / 10" or "3" (unknown total); `null` without progress. */
 export declare const progressCount: (progress: PluginActionRunProgress | null) => string | null;
-/** Short German date and time. */
+/** German date and time. */
 export declare const formatRunTime: (iso: string | null) => string;
 export type RunTransition = "completed" | "failed" | null;
 /**

package/{dist → .medusa/server/src/admin}/admin-components/features/plugin-features/lib/action-runs.js

@@ -1,3 +1,4 @@
+import { formatDateTime } from "../../../shared/lib/format";
 const SUMMARY_MAX_LENGTH = 200;
 const cut = (text) => text.length > SUMMARY_MAX_LENGTH
     ? `${text.slice(0, SUMMARY_MAX_LENGTH - 1)}…`
@@ -48,7 +49,7 @@ export const progressCount = (progress) => {
         ? String(progress.current)
         : `${progress.current} / ${progress.total}`;
 };
-/** Short German date and time. */
+/** German date and time. */
 export const formatRunTime = (iso) => {
     if (!iso) {
         return "";
@@ -56,7 +57,7 @@ export const formatRunTime = (iso) => {
     const date = new Date(iso);
     return Number.isNaN(date.getTime())
         ? iso
-        : date.toLocaleString("de-AT", { dateStyle: "short", timeStyle: "short" });
+        : formatDateTime(date);
 };
 /**
  * Whether the latest run just finished while this page watched it: the same

package/{dist → .medusa/server/src/admin}/admin-components/features/plugin-features/lib/plugin-features-admin-client.d.ts

@@ -22,6 +22,7 @@ export declare const listPluginFeatures: () => Promise<{
             key: string;
             label: string;
             description: string | null;
+            group: string | null;
             required: boolean;
             is_set: boolean;
             source: "default" | "stored" | "config" | "none";
@@ -37,6 +38,7 @@ export declare const listPluginFeatures: () => Promise<{
             key: string;
             label: string;
             description: string | null;
+            group: string | null;
             required: boolean;
             is_set: boolean;
             source: "default" | "stored" | "config" | "none";
@@ -50,17 +52,19 @@ export declare const listPluginFeatures: () => Promise<{
             key: string;
             label: string;
             description: string | null;
+            group: string | null;
             required: boolean;
             is_set: boolean;
             source: "default" | "stored" | "config" | "none";
             invalidates: string[];
         } | {
-            type: "string" | "boolean" | "url" | "image";
+            type: "string" | "boolean" | "color" | "url" | "image";
             default: string | number | boolean | null;
             value: string | number | boolean | null;
             key: string;
             label: string;
             description: string | null;
+            group: string | null;
             required: boolean;
             is_set: boolean;
             source: "default" | "stored" | "config" | "none";
@@ -102,6 +106,7 @@ export declare const retrievePluginFeatures: (pluginKey: string) => Promise<{
             key: string;
             label: string;
             description: string | null;
+            group: string | null;
             required: boolean;
             is_set: boolean;
             source: "default" | "stored" | "config" | "none";
@@ -117,6 +122,7 @@ export declare const retrievePluginFeatures: (pluginKey: string) => Promise<{
             key: string;
             label: string;
             description: string | null;
+            group: string | null;
             required: boolean;
             is_set: boolean;
             source: "default" | "stored" | "config" | "none";
@@ -130,17 +136,19 @@ export declare const retrievePluginFeatures: (pluginKey: string) => Promise<{
             key: string;
             label: string;
             description: string | null;
+            group: string | null;
             required: boolean;
             is_set: boolean;
             source: "default" | "stored" | "config" | "none";
             invalidates: string[];
         } | {
-            type: "string" | "boolean" | "url" | "image";
+            type: "string" | "boolean" | "color" | "url" | "image";
             default: string | number | boolean | null;
             value: string | number | boolean | null;
             key: string;
             label: string;
             description: string | null;
+            group: string | null;
             required: boolean;
             is_set: boolean;
             source: "default" | "stored" | "config" | "none";
@@ -182,6 +190,7 @@ export declare const updatePluginFeatures: (payload: UpdatePluginFeaturesPayload
             key: string;
             label: string;
             description: string | null;
+            group: string | null;
             required: boolean;
             is_set: boolean;
             source: "default" | "stored" | "config" | "none";
@@ -197,6 +206,7 @@ export declare const updatePluginFeatures: (payload: UpdatePluginFeaturesPayload
             key: string;
             label: string;
             description: string | null;
+            group: string | null;
             required: boolean;
             is_set: boolean;
             source: "default" | "stored" | "config" | "none";
@@ -210,17 +220,19 @@ export declare const updatePluginFeatures: (payload: UpdatePluginFeaturesPayload
             key: string;
             label: string;
             description: string | null;
+            group: string | null;
             required: boolean;
             is_set: boolean;
             source: "default" | "stored" | "config" | "none";
             invalidates: string[];
         } | {
-            type: "string" | "boolean" | "url" | "image";
+            type: "string" | "boolean" | "color" | "url" | "image";
             default: string | number | boolean | null;
             value: string | number | boolean | null;
             key: string;
             label: string;
             description: string | null;
+            group: string | null;
             required: boolean;
             is_set: boolean;
             source: "default" | "stored" | "config" | "none";
@@ -262,6 +274,7 @@ export declare const updatePluginSettings: (pluginKey: string, payload: UpdatePl
             key: string;
             label: string;
             description: string | null;
+            group: string | null;
             required: boolean;
             is_set: boolean;
             source: "default" | "stored" | "config" | "none";
@@ -277,6 +290,7 @@ export declare const updatePluginSettings: (pluginKey: string, payload: UpdatePl
             key: string;
             label: string;
             description: string | null;
+            group: string | null;
             required: boolean;
             is_set: boolean;
             source: "default" | "stored" | "config" | "none";
@@ -290,17 +304,19 @@ export declare const updatePluginSettings: (pluginKey: string, payload: UpdatePl
             key: string;
             label: string;
             description: string | null;
+            group: string | null;
             required: boolean;
             is_set: boolean;
             source: "default" | "stored" | "config" | "none";
             invalidates: string[];
         } | {
-            type: "string" | "boolean" | "url" | "image";
+            type: "string" | "boolean" | "color" | "url" | "image";
             default: string | number | boolean | null;
             value: string | number | boolean | null;
             key: string;
             label: string;
             description: string | null;
+            group: string | null;
             required: boolean;
             is_set: boolean;
             source: "default" | "stored" | "config" | "none";

package/{dist → .medusa/server/src/admin}/admin-components/features/plugin-features/lib/plugin-features-admin-client.js

@@ -1,5 +1,5 @@
 import { pluginFeaturesAdminPaths } from "@hartl-services/medusa-food-supplements-contracts/paths/plugin-features";
-import { sdk } from "../../../lib/sdk";
+import { sdk } from "../../../shared/lib/sdk";
 export const listPluginFeatures = () => sdk.client.fetch(pluginFeaturesAdminPaths.get.list, { method: "GET" });
 export const retrievePluginFeatures = (pluginKey) => sdk.client.fetch(pluginFeaturesAdminPaths.get.retrieve(pluginKey), { method: "GET" });
 export const updatePluginFeatures = (payload) => sdk.client.fetch(pluginFeaturesAdminPaths.post.update, { method: "POST", body: payload });

package/{dist → .medusa/server/src/admin}/admin-components/features/plugin-features/lib/settings-draft.d.ts

@@ -1,6 +1,6 @@
 import type { AdminPluginSetting, UpdatePluginSettingsPayload } from "@hartl-services/medusa-food-supplements-contracts/types/plugin-features-admin";
 /**
- * Form state per setting: text for string/url/number inputs and the chosen
+ * Form state per setting: text for string/url/number/color inputs and the chosen
  * option of a select (`""` = none), a boolean for
  * switches, text for a new secret (`""` = keep) or `null` = clear the
  * stored secret on save.
@@ -8,6 +8,21 @@ import type { AdminPluginSetting, UpdatePluginSettingsPayload } from "@hartl-ser
 export type SettingsDraft = Record<string, string | boolean | null>;
 type SettingValues = UpdatePluginSettingsPayload["values"];
 export declare const initialSettingsDraft: (settings: readonly AdminPluginSetting[]) => SettingsDraft;
+/** `#rrggbb` (either case); the server stores it lowercase. */
+export declare const isHexColor: (value: string) => boolean;
+/** Colors are typed and sent lowercase; surrounding spaces are dropped. */
+export declare const normalizeColorInput: (value: string) => string;
+export type SettingSection = {
+    /** Section heading; `null` = no heading. */
+    group: string | null;
+    settings: AdminPluginSetting[];
+};
+/**
+ * Splits the settings (in their given order) into consecutive runs of the
+ * same `group`; a new section starts whenever the group differs from the
+ * previous setting's group.
+ */
+export declare const groupSettings: (settings: readonly AdminPluginSetting[]) => SettingSection[];
 /**
  * Keys of number fields whose input the browser could not parse (e.g. "1e"):
  * the input then reports `""`, which must not be read as "cleared".
@@ -15,7 +30,7 @@ export declare const initialSettingsDraft: (settings: readonly AdminPluginSettin
 export type UnparsableKeys = readonly string[];
 /**
  * Keys whose draft value cannot be sent: unparsable, not a number or
- * outside min/max. Saving is disabled while any key is listed.
+ * outside min/max, or a color that is not `#rrggbb`. Saving is disabled while any key is listed.
  */
 export declare const invalidDraftKeys: (settings: readonly AdminPluginSetting[], draft: SettingsDraft, unparsable?: UnparsableKeys) => string[];
 /**