strapi-plugin-magic-mail 3.0.4 → 4.0.0

package/dist/admin/PluginSettings-BR2-PVHx.mjs

@@ -0,0 +1,705 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useMemo } from "react";
+import { Loader, Typography, Flex, Switch, Box, Field, TextInput } from "@strapi/design-system";
+import { Page, useFetchClient, useNotification } from "@strapi/strapi/admin";
+import { a as isValidEmailAddress, j as useMagicMailRBAC, u as useMagicMailIntl, w as useUnsavedChangesGuard, P as PluginPageTitle, T as TertiaryButton, G as GradientButton, U as UnsavedChangesDialog, B as apiErrorMessage, m as motionSafe, f as fontSize, c as color, h as accent } from "./analyticsLogs-BCY0Zv3Y.mjs";
+import { p as pluginPermissions } from "./index-qvFJ-a0Q.mjs";
+import { ExclamationTriangleIcon, ArrowPathIcon, LinkIcon, EyeIcon, EnvelopeIcon, UserIcon } from "@heroicons/react/24/outline";
+import styled, { css, keyframes } from "styled-components";
+const SETTINGS_DEFAULTS = Object.freeze({
+  enableLinkTracking: true,
+  enableOpenTracking: true,
+  trackingBaseUrl: "",
+  defaultFromName: "",
+  defaultFromEmail: "",
+  unsubscribeUrl: "",
+  enableUnsubscribeHeader: true
+});
+const SETTINGS_KEYS = Object.freeze(Object.keys(SETTINGS_DEFAULTS));
+const MAX_URL_LENGTH = 2048;
+const MAX_NAME_LENGTH = 1e3;
+const LOCAL_HOSTS = /* @__PURE__ */ new Set(["localhost", "127.0.0.1", "[::1]", "::1"]);
+const normalizeSettings = (data) => {
+  const source = data && typeof data === "object" ? data : {};
+  const result = {};
+  for (const key of SETTINGS_KEYS) {
+    const fallback = SETTINGS_DEFAULTS[key];
+    const value = source[key];
+    if (typeof fallback === "boolean") {
+      result[key] = typeof value === "boolean" ? value : fallback;
+    } else {
+      result[key] = typeof value === "string" ? value : "";
+    }
+  }
+  return result;
+};
+const diffSettings = (initial, current) => {
+  const changes = {};
+  for (const key of SETTINGS_KEYS) {
+    if (initial?.[key] !== current?.[key]) {
+      const value = current?.[key];
+      changes[key] = typeof value === "string" ? value.trim() : value;
+    }
+  }
+  return changes;
+};
+const parseUrl = (value) => {
+  try {
+    return new URL(value);
+  } catch {
+    return null;
+  }
+};
+const isInsecureRemoteUrl = (value) => {
+  const url = typeof value === "string" ? parseUrl(value.trim()) : null;
+  return Boolean(url && url.protocol === "http:" && !LOCAL_HOSTS.has(url.hostname));
+};
+const checkUrl = (value, protocols) => {
+  const trimmed = value.trim();
+  if (!trimmed) return null;
+  if (trimmed.length > MAX_URL_LENGTH || /\s/.test(trimmed)) return "invalidUrl";
+  const url = parseUrl(trimmed.split("{{email}}").join("user%40example.com"));
+  if (!url) return "invalidUrl";
+  if (!protocols.includes(url.protocol)) return "invalidProtocol";
+  return null;
+};
+const validateSettings = (settings) => {
+  const errors = {};
+  const trackingError = checkUrl(settings?.trackingBaseUrl ?? "", ["http:", "https:"]);
+  if (trackingError) errors.trackingBaseUrl = trackingError;
+  const unsubscribeError = checkUrl(settings?.unsubscribeUrl ?? "", ["http:", "https:", "mailto:"]);
+  if (unsubscribeError) errors.unsubscribeUrl = unsubscribeError;
+  const email = (settings?.defaultFromEmail ?? "").trim();
+  if (email && !isValidEmailAddress(email)) errors.defaultFromEmail = "invalidEmail";
+  const name = settings?.defaultFromName ?? "";
+  if (name.length > MAX_NAME_LENGTH || /[\r\n]/.test(name)) errors.defaultFromName = "invalidText";
+  return errors;
+};
+const fadeIn = keyframes`
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+`;
+const mobile = "768px";
+const PageContainer = styled(Box)`
+  ${motionSafe(css`
+    animation: ${fadeIn} 0.4s ease-out;
+  `)}
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 40px 32px;
+
+  @media screen and (max-width: ${mobile}) {
+    padding: 24px 16px;
+  }
+`;
+const PageHeader = styled(Flex)`
+  margin-bottom: 32px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+`;
+const PageTitle = styled(Typography)`
+  font-size: ${fontSize(6)};
+  font-weight: 700;
+  color: ${color("neutral800")};
+  display: block;
+  margin: 0;
+`;
+const PageSubtitle = styled(Typography)`
+  font-size: ${fontSize(2)};
+  color: ${color("neutral600")};
+  display: block;
+  margin: 0;
+`;
+const ActionBar = styled(Flex)`
+  margin-bottom: 32px;
+  padding: 16px 20px;
+  background: ${color("neutral0")};
+  border: 1px solid rgba(128, 128, 128, 0.2);
+  border-radius: 8px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  flex-wrap: wrap;
+  gap: 12px;
+`;
+const ActionButtons = styled(Flex)`
+  flex-wrap: wrap;
+  gap: 8px;
+`;
+const SettingsSection = styled(Box)`
+  background: ${color("neutral0")};
+  border: 1px solid rgba(128, 128, 128, 0.2);
+  border-radius: 12px;
+  overflow: hidden;
+  margin-bottom: 24px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+`;
+const SectionHeader = styled(Flex)`
+  padding: 20px 24px;
+  background: ${color("neutral100")};
+  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
+
+  @media screen and (max-width: ${mobile}) {
+    padding: 16px;
+  }
+`;
+const SectionIcon = styled(Box)`
+  width: 44px;
+  height: 44px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 16px;
+  background: ${(props) => props.$bgColor || "rgba(14, 165, 233, 0.12)"};
+  flex-shrink: 0;
+
+  svg {
+    width: 22px;
+    height: 22px;
+    color: ${(p) => (accent[p.$tone] ?? accent.primary)(p)};
+  }
+`;
+const SectionContent = styled(Box)`
+  padding: 24px;
+
+  @media screen and (max-width: ${mobile}) {
+    padding: 16px;
+  }
+`;
+const SettingRow = styled(Flex)`
+  padding: 16px 0;
+  border-bottom: 1px solid rgba(128, 128, 128, 0.15);
+
+  &:last-child {
+    border-bottom: none;
+    padding-bottom: 0;
+  }
+
+  &:first-child {
+    padding-top: 0;
+  }
+`;
+const SettingInfo = styled(Flex)`
+  flex: 1;
+  min-width: 0;
+  padding-right: 24px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+
+  @media screen and (max-width: ${mobile}) {
+    padding-right: 12px;
+  }
+`;
+const SettingLabel = styled(Typography)`
+  font-size: ${fontSize(2)};
+  font-weight: 600;
+  color: ${color("neutral800")};
+  display: block;
+`;
+const SettingDescription = styled(Typography)`
+  font-size: ${fontSize(1)};
+  color: ${color("neutral600")};
+  line-height: 1.5;
+  display: block;
+`;
+const SwitchWrapper = styled(Box)`
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+
+  /* Touch screens: the DS switch (40x24) grows to a 48x32 target with the
+     same proportions (as in the routing rule modal). */
+  @media (max-width: 767px) {
+    button[role='switch'] {
+      width: 48px;
+      height: 32px;
+      border-radius: 16px;
+    }
+
+    button[role='switch'] > span {
+      width: 24px;
+      height: 24px;
+    }
+  }
+`;
+const LoaderContainer = styled(Flex)`
+  min-height: 400px;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 16px;
+`;
+const ErrorState = styled(Flex)`
+  min-height: 320px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  text-align: center;
+  padding: 32px 16px;
+  background: ${color("neutral0")};
+  border: 2px dashed rgba(128, 128, 128, 0.3);
+  border-radius: 12px;
+
+  /* Only the state icon; the Retry button keeps its neutral icon. */
+  & > svg {
+    width: 40px;
+    height: 40px;
+    color: ${accent.danger};
+  }
+`;
+const InfoBox = styled(Box)`
+  background: rgba(14, 165, 233, 0.08);
+  border: 1px solid rgba(14, 165, 233, 0.3);
+  border-radius: 8px;
+  padding: 12px 16px;
+  margin-top: 16px;
+`;
+const CodeSnippet = styled.code`
+  background: #1e293b;
+  color: #e2e8f0;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: ${fontSize(1)};
+  font-family: 'Monaco', 'Menlo', monospace;
+  overflow-wrap: anywhere;
+`;
+const ICON_18 = { width: 18, height: 18 };
+const errorMessage = (t, code) => {
+  switch (code) {
+    case "invalidUrl":
+      return t(
+        "settings.errors.invalidUrl",
+        "Enter a valid URL, for example https://api.example.com"
+      );
+    case "invalidProtocol":
+      return t("settings.errors.invalidProtocol", "This URL type is not allowed here");
+    case "invalidEmail":
+      return t("settings.errors.invalidEmail", "Enter a valid email address");
+    case "invalidText":
+      return t("settings.errors.invalidText", "Use a single line of at most 1000 characters");
+    default:
+      return void 0;
+  }
+};
+const PluginSettingsContent = () => {
+  const { canManage, isLoading: rbacLoading, error: rbacError } = useMagicMailRBAC();
+  const { t } = useMagicMailIntl();
+  const { get, put } = useFetchClient();
+  const { toggleNotification } = useNotification();
+  const [loading, setLoading] = useState(true);
+  const [loadError, setLoadError] = useState(null);
+  const [initialSettings, setInitialSettings] = useState(null);
+  const [settings, setSettings] = useState(SETTINGS_DEFAULTS);
+  const [saving, setSaving] = useState(false);
+  const mounted = useRef(true);
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  const changes = useMemo(
+    () => initialSettings ? diffSettings(initialSettings, settings) : {},
+    [initialSettings, settings]
+  );
+  const hasChanges = Object.keys(changes).length > 0;
+  const errors = useMemo(() => validateSettings(settings), [settings]);
+  const isValid = Object.keys(errors).length === 0;
+  const guard = useUnsavedChangesGuard(hasChanges);
+  const [settingsReloadKey, setSettingsReloadKey] = useState(0);
+  useEffect(() => {
+    let ignore = false;
+    const load = async () => {
+      try {
+        const response = await get("/magic-mail/settings");
+        if (ignore) return;
+        const data = response.data?.data;
+        if (!data || typeof data !== "object") throw new Error("Empty settings response");
+        const loaded = normalizeSettings(data);
+        setInitialSettings(loaded);
+        setSettings(loaded);
+        setLoadError(null);
+      } catch (err) {
+        if (ignore) return;
+        console.error("[MagicMail] Failed to fetch plugin settings");
+        const message = apiErrorMessage(err) || t("settings.loadError", "Failed to load settings");
+        setLoadError(message);
+        toggleNotification({ type: "danger", message });
+      } finally {
+        if (!ignore) setLoading(false);
+      }
+    };
+    load();
+    return () => {
+      ignore = true;
+    };
+  }, [get, t, toggleNotification, settingsReloadKey]);
+  const fetchSettings = () => {
+    setLoading(true);
+    setSettingsReloadKey((key) => key + 1);
+  };
+  const saveSettings = async () => {
+    if (!canManage || !initialSettings || !hasChanges || !isValid) return;
+    setSaving(true);
+    try {
+      const response = await put("/magic-mail/settings", changes);
+      const saved = response?.data?.data ? normalizeSettings(response.data.data) : { ...settings, ...changes };
+      if (!mounted.current) return;
+      setInitialSettings(saved);
+      setSettings(saved);
+      toggleNotification({
+        type: "success",
+        message: t("settings.saveSuccess", "Settings saved")
+      });
+    } catch (err) {
+      console.error("[MagicMail] Failed to save plugin settings");
+      toggleNotification({
+        type: "danger",
+        message: apiErrorMessage(err) || t("settings.saveError", "Failed to save settings")
+      });
+    } finally {
+      if (mounted.current) setSaving(false);
+    }
+  };
+  const handleChange = (key, value) => {
+    if (!canManage) return;
+    setSettings((prev) => ({ ...prev, [key]: value }));
+  };
+  const pageTitle = /* @__PURE__ */ jsx(PluginPageTitle, { children: t("settings.pageTitle", "Plugin Settings") });
+  if (loading || rbacLoading) {
+    return /* @__PURE__ */ jsxs(PageContainer, { children: [
+      pageTitle,
+      /* @__PURE__ */ jsx(LoaderContainer, { children: /* @__PURE__ */ jsx(Loader, { children: t("settings.loading", "Loading settings...") }) })
+    ] });
+  }
+  const header = /* @__PURE__ */ jsxs(PageHeader, { children: [
+    /* @__PURE__ */ jsx(PageTitle, { tag: "h1", children: t("settings.title", "Plugin Settings") }),
+    /* @__PURE__ */ jsx(PageSubtitle, { tag: "p", children: t(
+      "settings.subtitle",
+      "Configure email tracking, analytics, and default sender information"
+    ) })
+  ] });
+  if (loadError || !initialSettings) {
+    return /* @__PURE__ */ jsxs(PageContainer, { children: [
+      pageTitle,
+      header,
+      /* @__PURE__ */ jsxs(ErrorState, { role: "alert", children: [
+        /* @__PURE__ */ jsx(ExclamationTriangleIcon, { "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "delta", fontWeight: "bold", tag: "h2", children: t("settings.loadErrorTitle", "Settings could not be loaded") }),
+        /* @__PURE__ */ jsx(Typography, { variant: "omega", textColor: "neutral600", children: loadError || t("settings.loadError", "Failed to load settings") }),
+        /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: t(
+          "settings.loadErrorHint",
+          "Saving is disabled until the current settings have been loaded."
+        ) }),
+        /* @__PURE__ */ jsx(
+          TertiaryButton,
+          {
+            startIcon: /* @__PURE__ */ jsx(ArrowPathIcon, { style: ICON_18, "aria-hidden": "true" }),
+            onClick: fetchSettings,
+            children: t("settings.retry", "Retry")
+          }
+        )
+      ] })
+    ] });
+  }
+  const statusText = rbacError ? t(
+    "common.permissions.loadError",
+    "Your permissions could not be loaded. Reload the page to try again."
+  ) : !canManage ? t(
+    "settings.status.readOnly",
+    "Read-only access. You need the MagicMail manage permission to change settings."
+  ) : !isValid ? t("settings.status.invalid", "Please correct the highlighted fields") : hasChanges ? t("settings.status.unsaved", "You have unsaved changes") : t("settings.status.saved", "All changes saved");
+  const showTrackingUrl = settings.enableLinkTracking || Boolean(errors.trackingBaseUrl);
+  const showUnsubscribeUrl = settings.enableUnsubscribeHeader || Boolean(errors.unsubscribeUrl);
+  return /* @__PURE__ */ jsxs(PageContainer, { children: [
+    pageTitle,
+    header,
+    /* @__PURE__ */ jsxs(ActionBar, { justifyContent: "space-between", alignItems: "center", children: [
+      /* @__PURE__ */ jsx(
+        Typography,
+        {
+          variant: "omega",
+          textColor: rbacError || !isValid && canManage ? "danger600" : "neutral600",
+          "aria-live": "polite",
+          children: statusText
+        }
+      ),
+      /* @__PURE__ */ jsxs(ActionButtons, { children: [
+        /* @__PURE__ */ jsx(
+          TertiaryButton,
+          {
+            startIcon: /* @__PURE__ */ jsx(ArrowPathIcon, { style: ICON_18, "aria-hidden": "true" }),
+            onClick: () => guard.runGuarded(fetchSettings),
+            disabled: saving,
+            children: t("settings.refresh", "Refresh")
+          }
+        ),
+        canManage && /* @__PURE__ */ jsx(
+          GradientButton,
+          {
+            onClick: saveSettings,
+            loading: saving,
+            disabled: !hasChanges || !canManage || !isValid,
+            children: t("settings.save", "Save Changes")
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(SettingsSection, { tag: "section", "aria-labelledby": "mm-settings-link-tracking", children: [
+      /* @__PURE__ */ jsxs(SectionHeader, { alignItems: "center", children: [
+        /* @__PURE__ */ jsx(SectionIcon, { $bgColor: "rgba(37, 99, 235, 0.15)", $tone: "primary", children: /* @__PURE__ */ jsx(LinkIcon, { "aria-hidden": "true" }) }),
+        /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "delta", fontWeight: "bold", tag: "h2", id: "mm-settings-link-tracking", children: t("settings.linkTracking.title", "Link Tracking") }),
+          /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: t(
+            "settings.linkTracking.subtitle",
+            "Track when recipients click links in your emails"
+          ) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(SectionContent, { children: [
+        /* @__PURE__ */ jsxs(SettingRow, { alignItems: "center", children: [
+          /* @__PURE__ */ jsxs(SettingInfo, { children: [
+            /* @__PURE__ */ jsx(SettingLabel, { children: t("settings.linkTracking.label", "Enable Link Tracking") }),
+            /* @__PURE__ */ jsx(SettingDescription, { children: t(
+              "settings.linkTracking.description",
+              "Rewrite links in outgoing emails to measure click-through rates. Links with sensitive tokens are never rewritten."
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx(SwitchWrapper, { children: /* @__PURE__ */ jsx(
+            Switch,
+            {
+              checked: settings.enableLinkTracking,
+              disabled: !canManage,
+              onCheckedChange: (checked) => handleChange("enableLinkTracking", checked),
+              "aria-label": t("settings.linkTracking.label", "Enable Link Tracking"),
+              onLabel: t("settings.switch.on", "Enabled"),
+              offLabel: t("settings.switch.off", "Disabled"),
+              visibleLabels: false
+            }
+          ) })
+        ] }),
+        showTrackingUrl && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Box, { style: { marginTop: "20px" }, children: /* @__PURE__ */ jsxs(
+            Field.Root,
+            {
+              name: "trackingBaseUrl",
+              error: errorMessage(t, errors.trackingBaseUrl),
+              hint: isInsecureRemoteUrl(settings.trackingBaseUrl) ? t(
+                "settings.trackingBaseUrl.httpWarning",
+                "This URL uses http. Use https in production so tracked links stay secure."
+              ) : t(
+                "settings.trackingBaseUrl.hint",
+                "Public URL where your Strapi API is reachable. Leave empty to use the server URL."
+              ),
+              children: [
+                /* @__PURE__ */ jsx(Field.Label, { children: t("settings.trackingBaseUrl.label", "Tracking Base URL") }),
+                /* @__PURE__ */ jsx(
+                  TextInput,
+                  {
+                    type: "url",
+                    inputMode: "url",
+                    autoComplete: "url",
+                    placeholder: "https://api.example.com",
+                    value: settings.trackingBaseUrl,
+                    onChange: (e) => handleChange("trackingBaseUrl", e.target.value),
+                    disabled: !canManage
+                  }
+                ),
+                /* @__PURE__ */ jsx(Field.Hint, {}),
+                /* @__PURE__ */ jsx(Field.Error, {})
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(InfoBox, { children: [
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "pi",
+                textColor: "primary700",
+                fontWeight: "medium",
+                style: { display: "block" },
+                children: t("settings.override.title", "Per-Email Override")
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "pi",
+                textColor: "primary600",
+                style: { marginTop: "4px", display: "block" },
+                children: t(
+                  "settings.override.body",
+                  "Disable tracking for sensitive emails (password resets, magic links) by passing {code} when sending.",
+                  { code: /* @__PURE__ */ jsx(CodeSnippet, { children: "skipLinkTracking: true" }, "code") }
+                )
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(SettingsSection, { tag: "section", "aria-labelledby": "mm-settings-open-tracking", children: [
+      /* @__PURE__ */ jsxs(SectionHeader, { alignItems: "center", children: [
+        /* @__PURE__ */ jsx(SectionIcon, { $bgColor: "rgba(34, 197, 94, 0.15)", $tone: "success", children: /* @__PURE__ */ jsx(EyeIcon, { "aria-hidden": "true" }) }),
+        /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "delta", fontWeight: "bold", tag: "h2", id: "mm-settings-open-tracking", children: t("settings.openTracking.title", "Open Tracking") }),
+          /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: t("settings.openTracking.subtitle", "Track when recipients open your emails") })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(SectionContent, { children: /* @__PURE__ */ jsxs(SettingRow, { alignItems: "center", children: [
+        /* @__PURE__ */ jsxs(SettingInfo, { children: [
+          /* @__PURE__ */ jsx(SettingLabel, { children: t("settings.openTracking.label", "Enable Open Tracking") }),
+          /* @__PURE__ */ jsx(SettingDescription, { children: t(
+            "settings.openTracking.description",
+            "Add an invisible tracking pixel to emails to detect when they are opened. Some email clients block tracking pixels."
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx(SwitchWrapper, { children: /* @__PURE__ */ jsx(
+          Switch,
+          {
+            checked: settings.enableOpenTracking,
+            disabled: !canManage,
+            onCheckedChange: (checked) => handleChange("enableOpenTracking", checked),
+            "aria-label": t("settings.openTracking.label", "Enable Open Tracking"),
+            onLabel: t("settings.switch.on", "Enabled"),
+            offLabel: t("settings.switch.off", "Disabled"),
+            visibleLabels: false
+          }
+        ) })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs(SettingsSection, { tag: "section", "aria-labelledby": "mm-settings-unsubscribe", children: [
+      /* @__PURE__ */ jsxs(SectionHeader, { alignItems: "center", children: [
+        /* @__PURE__ */ jsx(SectionIcon, { $bgColor: "rgba(245, 158, 11, 0.15)", $tone: "warning", children: /* @__PURE__ */ jsx(EnvelopeIcon, { "aria-hidden": "true" }) }),
+        /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "delta", fontWeight: "bold", tag: "h2", id: "mm-settings-unsubscribe", children: t("settings.unsubscribe.title", "Unsubscribe Settings") }),
+          /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: t(
+            "settings.unsubscribe.subtitle",
+            "List-Unsubscribe headers for one-click unsubscribe"
+          ) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(SectionContent, { children: [
+        /* @__PURE__ */ jsxs(SettingRow, { alignItems: "center", children: [
+          /* @__PURE__ */ jsxs(SettingInfo, { children: [
+            /* @__PURE__ */ jsx(SettingLabel, { children: t("settings.unsubscribe.label", "Enable List-Unsubscribe Header") }),
+            /* @__PURE__ */ jsx(SettingDescription, { children: t(
+              "settings.unsubscribe.description",
+              "Add RFC 8058 unsubscribe headers to non-marketing emails too. Marketing emails always get them when an unsubscribe URL is known. This enables the Unsubscribe button in clients such as Gmail and Outlook."
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx(SwitchWrapper, { children: /* @__PURE__ */ jsx(
+            Switch,
+            {
+              checked: settings.enableUnsubscribeHeader,
+              disabled: !canManage,
+              onCheckedChange: (checked) => handleChange("enableUnsubscribeHeader", checked),
+              "aria-label": t("settings.unsubscribe.label", "Enable List-Unsubscribe Header"),
+              onLabel: t("settings.switch.on", "Enabled"),
+              offLabel: t("settings.switch.off", "Disabled"),
+              visibleLabels: false
+            }
+          ) })
+        ] }),
+        showUnsubscribeUrl && /* @__PURE__ */ jsx(Box, { style: { marginTop: "20px" }, children: /* @__PURE__ */ jsxs(
+          Field.Root,
+          {
+            name: "unsubscribeUrl",
+            error: errorMessage(t, errors.unsubscribeUrl),
+            hint: t(
+              "settings.unsubscribeUrl.hint",
+              "Default unsubscribe link (https, http or mailto) used when a send does not pass its own. Without a URL, no List-Unsubscribe header is added."
+            ),
+            children: [
+              /* @__PURE__ */ jsx(Field.Label, { children: t("settings.unsubscribeUrl.label", "Unsubscribe URL") }),
+              /* @__PURE__ */ jsx(
+                TextInput,
+                {
+                  type: "text",
+                  inputMode: "url",
+                  placeholder: "https://example.com/unsubscribe?email={{email}}",
+                  value: settings.unsubscribeUrl,
+                  onChange: (e) => handleChange("unsubscribeUrl", e.target.value),
+                  disabled: !canManage
+                }
+              ),
+              /* @__PURE__ */ jsx(Field.Hint, {}),
+              /* @__PURE__ */ jsx(Field.Error, {})
+            ]
+          }
+        ) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(SettingsSection, { tag: "section", "aria-labelledby": "mm-settings-sender", children: [
+      /* @__PURE__ */ jsxs(SectionHeader, { alignItems: "center", children: [
+        /* @__PURE__ */ jsx(SectionIcon, { $bgColor: "rgba(147, 51, 234, 0.12)", $tone: "secondary", children: /* @__PURE__ */ jsx(UserIcon, { "aria-hidden": "true" }) }),
+        /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "flex-start", gap: 1, children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "delta", fontWeight: "bold", tag: "h2", id: "mm-settings-sender", children: t("settings.sender.title", "Default Sender") }),
+          /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: t(
+            "settings.sender.subtitle",
+            "Fallback sender information when not specified per email"
+          ) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(SectionContent, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 5, children: [
+        /* @__PURE__ */ jsxs(
+          Field.Root,
+          {
+            name: "defaultFromName",
+            error: errorMessage(t, errors.defaultFromName),
+            hint: t("settings.fromName.hint", "The sender name shown in recipients' inboxes"),
+            children: [
+              /* @__PURE__ */ jsx(Field.Label, { children: t("settings.fromName.label", "Default From Name") }),
+              /* @__PURE__ */ jsx(
+                TextInput,
+                {
+                  autoComplete: "organization",
+                  placeholder: t("settings.fromName.placeholder", "Your Company"),
+                  value: settings.defaultFromName,
+                  onChange: (e) => handleChange("defaultFromName", e.target.value),
+                  disabled: !canManage
+                }
+              ),
+              /* @__PURE__ */ jsx(Field.Hint, {}),
+              /* @__PURE__ */ jsx(Field.Error, {})
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Field.Root,
+          {
+            name: "defaultFromEmail",
+            error: errorMessage(t, errors.defaultFromEmail),
+            hint: t(
+              "settings.fromEmail.hint",
+              "Reference only. Emails are always sent from the selected account's address."
+            ),
+            children: [
+              /* @__PURE__ */ jsx(Field.Label, { children: t("settings.fromEmail.label", "Default From Email") }),
+              /* @__PURE__ */ jsx(
+                TextInput,
+                {
+                  type: "email",
+                  autoComplete: "email",
+                  placeholder: "noreply@example.com",
+                  value: settings.defaultFromEmail,
+                  onChange: (e) => handleChange("defaultFromEmail", e.target.value),
+                  disabled: !canManage
+                }
+              ),
+              /* @__PURE__ */ jsx(Field.Hint, {}),
+              /* @__PURE__ */ jsx(Field.Error, {})
+            ]
+          }
+        )
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx(UnsavedChangesDialog, { guard })
+  ] });
+};
+const PluginSettingsPage = () => /* @__PURE__ */ jsx(Page.Protect, { permissions: pluginPermissions.read, children: /* @__PURE__ */ jsx(Page.Main, { children: /* @__PURE__ */ jsx(PluginSettingsContent, {}) }) });
+export {
+  PluginSettingsPage as default
+};