@netlib/widerrufsbutton 2.1.1 → 2.1.4

package/dist/index.es.js

@@ -1,6 +1,6 @@
-import { jsx as a, jsxs as c, Fragment as L } from "react/jsx-runtime";
-import { useState as w, useRef as q, useEffect as C } from "react";
-import { createPortal as F } from "react-dom";
+import { jsx as a, jsxs as c, Fragment as q } from "react/jsx-runtime";
+import { useState as m, useRef as F, useEffect as C } from "react";
+import { createPortal as L } from "react-dom";
 async function O(e, r) {
   const t = {
     "Content-Type": "application/json"
@@ -13,50 +13,49 @@ async function O(e, r) {
       ...e.companyName ? { companyName: e.companyName } : {},
       ...e.senderEmail ? { senderEmail: e.senderEmail } : {}
     }
-  }, l = await fetch(e.apiUrl, {
+  }, i = await fetch(e.apiUrl, {
     method: "PATCH",
     headers: t,
     body: JSON.stringify(o)
   });
   let d;
   try {
-    d = await l.json();
+    d = await i.json();
   } catch {
-    if (!l.ok) throw new Error(`Server antwortete mit Status ${l.status}`);
+    if (!i.ok) throw new Error(`Server antwortete mit Status ${i.status}`);
     return;
   }
   if (d !== null && typeof d == "object" && "ok" in d && d.ok === !1) {
     const s = d.message;
-    throw new Error(typeof s == "string" && s ? s : `Server antwortete mit Status ${l.status}`);
+    throw new Error(typeof s == "string" && s ? s : `Server antwortete mit Status ${i.status}`);
   }
-  if (!l.ok)
-    throw new Error(`Server antwortete mit Status ${l.status}`);
+  if (!i.ok)
+    throw new Error(`Server antwortete mit Status ${i.status}`);
 }
-const I = {
+const U = {
   firstName: "",
   lastName: "",
   email: "",
   orderNumber: "",
-  reason: "",
-  userMessage: ""
+  reason: ""
 };
 function k(e) {
   const r = {};
   return e.firstName.trim() || (r.firstName = "Bitte geben Sie Ihren Vornamen an."), e.lastName.trim() || (r.lastName = "Bitte geben Sie Ihren Nachnamen an."), e.email.trim() ? /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e.email) || (r.email = "Bitte geben Sie eine gültige E-Mail-Adresse an.") : r.email = "Bitte geben Sie Ihre E-Mail-Adresse an.", e.orderNumber.trim() || (r.orderNumber = "Bitte geben Sie die Bestellnummer oder Vertragsnummer an."), r;
 }
-function U({ config: e, onClose: r }) {
-  const [t, o] = w(I), [l, d] = w({}), [s, S] = w({}), [h, N] = w("idle"), [E, z] = w(""), W = q(null);
+function I({ config: e, onClose: r }) {
+  const [t, o] = m(U), [i, d] = m({}), [s, S] = m({}), [h, N] = m("idle"), [E, z] = m(""), W = F(null);
   C(() => {
     var u;
     (u = W.current) == null || u.focus();
     const n = (b) => b.key === "Escape" && r();
     return document.addEventListener("keydown", n), () => document.removeEventListener("keydown", n);
   }, [r]);
-  function m(n, u) {
+  function p(n, u) {
     const b = { ...t, [n]: u };
     if (o(b), s[n]) {
-      const g = k(b);
-      d((x) => ({ ...x, [n]: g[n] }));
+      const x = k(b);
+      d((g) => ({ ...g, [n]: x[n] }));
     }
   }
   function f(n) {
@@ -64,8 +63,8 @@ function U({ config: e, onClose: r }) {
     const u = k(t);
     d((b) => ({ ...b, [n]: u[n] }));
   }
-  async function T(n) {
-    var g, x;
+  async function M(n) {
+    var x, g;
     n.preventDefault();
     const u = Object.fromEntries(
       Object.keys(t).map((v) => [v, !0])
@@ -75,10 +74,10 @@ function U({ config: e, onClose: r }) {
     if (d(b), !(Object.keys(b).length > 0)) {
       N("loading"), z("");
       try {
-        await O(e, t), N("success"), (g = e.onSuccess) == null || g.call(e);
+        await O(e, t), N("success"), (x = e.onSuccess) == null || x.call(e);
       } catch (v) {
         const B = v instanceof Error ? v : new Error("Ein unbekannter Fehler ist aufgetreten.");
-        z(B.message), N("error"), (x = e.onError) == null || x.call(e, B);
+        z(B.message), N("error"), (g = e.onError) == null || g.call(e, B);
       }
     }
   }
@@ -115,26 +114,26 @@ function U({ config: e, onClose: r }) {
               "."
             ] })
           ] }),
-          /* @__PURE__ */ a(A, { links: e.legalLinks })
+          /* @__PURE__ */ a(A, { config: e })
         ] }) : /* @__PURE__ */ c("div", { className: "wrb-modal-body", children: [
           e.introText && /* @__PURE__ */ a("p", { className: "wrb-intro", children: e.introText }),
           h === "error" && E && /* @__PURE__ */ a("div", { className: "wrb-alert wrb-alert-error", role: "alert", children: E }),
-          /* @__PURE__ */ c("form", { onSubmit: T, noValidate: !0, children: [
+          /* @__PURE__ */ c("form", { onSubmit: M, noValidate: !0, children: [
             /* @__PURE__ */ a(
-              p,
+              w,
               {
                 label: "Vorname",
                 required: !0,
-                error: s.firstName ? l.firstName : void 0,
+                error: s.firstName ? i.firstName : void 0,
                 children: /* @__PURE__ */ a(
                   "input",
                   {
                     ref: W,
-                    className: `wrb-input${s.firstName && l.firstName ? " wrb-error" : ""}`,
+                    className: `wrb-input${s.firstName && i.firstName ? " wrb-error" : ""}`,
                     type: "text",
                     autoComplete: "given-name",
                     value: t.firstName,
-                    onChange: (n) => m("firstName", n.target.value),
+                    onChange: (n) => p("firstName", n.target.value),
                     onBlur: () => f("firstName"),
                     placeholder: "Max"
                   }
@@ -142,19 +141,19 @@ function U({ config: e, onClose: r }) {
               }
             ),
             /* @__PURE__ */ a(
-              p,
+              w,
               {
                 label: "Nachname",
                 required: !0,
-                error: s.lastName ? l.lastName : void 0,
+                error: s.lastName ? i.lastName : void 0,
                 children: /* @__PURE__ */ a(
                   "input",
                   {
-                    className: `wrb-input${s.lastName && l.lastName ? " wrb-error" : ""}`,
+                    className: `wrb-input${s.lastName && i.lastName ? " wrb-error" : ""}`,
                     type: "text",
                     autoComplete: "family-name",
                     value: t.lastName,
-                    onChange: (n) => m("lastName", n.target.value),
+                    onChange: (n) => p("lastName", n.target.value),
                     onBlur: () => f("lastName"),
                     placeholder: "Mustermann"
                   }
@@ -162,20 +161,20 @@ function U({ config: e, onClose: r }) {
               }
             ),
             /* @__PURE__ */ a(
-              p,
+              w,
               {
                 label: "E-Mail-Adresse",
                 required: !0,
                 hint: "Hierüber erhalten Sie die Eingangsbestätigung.",
-                error: s.email ? l.email : void 0,
+                error: s.email ? i.email : void 0,
                 children: /* @__PURE__ */ a(
                   "input",
                   {
-                    className: `wrb-input${s.email && l.email ? " wrb-error" : ""}`,
+                    className: `wrb-input${s.email && i.email ? " wrb-error" : ""}`,
                     type: "email",
                     autoComplete: "email",
                     value: t.email,
-                    onChange: (n) => m("email", n.target.value),
+                    onChange: (n) => p("email", n.target.value),
                     onBlur: () => f("email"),
                     placeholder: "name@beispiel.de"
                   }
@@ -183,19 +182,19 @@ function U({ config: e, onClose: r }) {
               }
             ),
             /* @__PURE__ */ a(
-              p,
+              w,
               {
                 label: "Bestell- / Auftrags- / Vertragsnummer",
                 required: !0,
                 hint: "Zu finden in Ihrer Bestellbestätigung.",
-                error: s.orderNumber ? l.orderNumber : void 0,
+                error: s.orderNumber ? i.orderNumber : void 0,
                 children: /* @__PURE__ */ a(
                   "input",
                   {
-                    className: `wrb-input${s.orderNumber && l.orderNumber ? " wrb-error" : ""}`,
+                    className: `wrb-input${s.orderNumber && i.orderNumber ? " wrb-error" : ""}`,
                     type: "text",
                     value: t.orderNumber,
-                    onChange: (n) => m("orderNumber", n.target.value),
+                    onChange: (n) => p("orderNumber", n.target.value),
                     onBlur: () => f("orderNumber"),
                     placeholder: "z.B. 10045678"
                   }
@@ -203,7 +202,7 @@ function U({ config: e, onClose: r }) {
               }
             ),
             /* @__PURE__ */ a(
-              p,
+              w,
               {
                 label: "Widerrufsgrund",
                 hint: "Freiwillige Angabe – ein Widerruf ist ohne Angabe von Gründen möglich.",
@@ -212,23 +211,13 @@ function U({ config: e, onClose: r }) {
                   {
                     className: "wrb-textarea",
                     value: t.reason,
-                    onChange: (n) => m("reason", n.target.value),
+                    onChange: (n) => p("reason", n.target.value),
                     placeholder: "Optional",
                     rows: 2
                   }
                 )
               }
             ),
-            /* @__PURE__ */ a(p, { label: "Nachricht", children: /* @__PURE__ */ a(
-              "textarea",
-              {
-                className: "wrb-textarea",
-                value: t.userMessage,
-                onChange: (n) => m("userMessage", n.target.value),
-                placeholder: "Optional",
-                rows: 3
-              }
-            ) }),
             /* @__PURE__ */ c("div", { className: "wrb-actions", children: [
               /* @__PURE__ */ a(
                 "button",
@@ -250,35 +239,34 @@ function U({ config: e, onClose: r }) {
               )
             ] })
           ] }),
-          /* @__PURE__ */ a(A, { links: e.legalLinks })
+          /* @__PURE__ */ a(A, { config: e })
         ] })
       ] })
     }
   );
 }
-function p({ label: e, required: r, hint: t, error: o, children: l }) {
+function w({ label: e, required: r, hint: t, error: o, children: i }) {
   return /* @__PURE__ */ c("div", { className: "wrb-field", children: [
     /* @__PURE__ */ c("label", { className: "wrb-label", children: [
       e,
       r && /* @__PURE__ */ a("span", { className: "wrb-required", "aria-hidden": "true", children: "*" })
     ] }),
-    l,
+    i,
     t && !o && /* @__PURE__ */ a("p", { className: "wrb-hint", children: t }),
     o && /* @__PURE__ */ a("p", { className: "wrb-field-error", role: "alert", children: o })
   ] });
 }
-function A({ links: e }) {
-  return e != null && e.length ? /* @__PURE__ */ a("div", { className: "wrb-legal-links", children: e.map((r) => /* @__PURE__ */ a(
+function A({ config: e }) {
+  return e.privacyUrl ? /* @__PURE__ */ a("div", { className: "wrb-legal-links", children: /* @__PURE__ */ a(
     "a",
     {
-      href: r.href,
+      href: e.privacyUrl,
       className: "wrb-legal-link",
       target: "_blank",
       rel: "noopener noreferrer",
-      children: r.name
-    },
-    r.href
-  )) }) : null;
+      children: e.privacyLabel ?? "Datenschutz"
+    }
+  ) }) : null;
 }
 const $ = `
 /* Widerrufsbutton widget — prefix: wrb- */
@@ -510,17 +498,17 @@ const $ = `
   text-decoration: underline;
 }
 `;
-function V() {
+function P() {
   const e = "wrb-styles";
   if (document.getElementById(e)) return;
   const r = document.createElement("style");
   r.id = e, r.textContent = $, document.head.appendChild(r);
 }
-function K({ config: e }) {
-  const [r, t] = w(!1);
+function R({ config: e }) {
+  const [r, t] = m(!1);
   return C(() => {
-    V();
-  }, []), /* @__PURE__ */ c(L, { children: [
+    P();
+  }, []), /* @__PURE__ */ c(q, { children: [
     /* @__PURE__ */ a(
       "button",
       {
@@ -530,25 +518,25 @@ function K({ config: e }) {
         children: e.buttonLabel ?? "Vertrag widerrufen"
       }
     ),
-    r && F(
-      /* @__PURE__ */ a(U, { config: e, onClose: () => t(!1) }),
+    r && L(
+      /* @__PURE__ */ a(I, { config: e, onClose: () => t(!1) }),
       document.body
     )
   ] });
 }
-function i(e) {
+function l(e) {
   return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
 function y(e) {
-  var r;
-  return (r = e.legalLinks) != null && r.length ? `
+  if (!e.privacyUrl) return "";
+  const r = l(e.privacyLabel ?? "Datenschutz");
+  return `
       <div class="wrb-legal-links">
-        ${e.legalLinks.map((t) => `<a href="${i(t.href)}" class="wrb-legal-link" rel="noopener noreferrer">${i(t.name)}</a>`).join(`
-        `)}
-      </div>` : "";
+        <a href="${l(e.privacyUrl)}" class="wrb-legal-link" rel="noopener noreferrer">${r}</a>
+      </div>`;
 }
-function M(e, r = "", t = "") {
-  const o = i(e.successUrl ?? r), l = i(e.errorUrl ?? t);
+function T(e, r = "", t = "") {
+  const o = l(e.successUrl ?? r), i = l(e.errorUrl ?? t);
   return `
           <div class="wrb-field">
             <label class="wrb-label">
@@ -588,16 +576,12 @@ function M(e, r = "", t = "") {
               Freiwillige Angabe – ein Widerruf ist ohne Angabe von Gründen möglich.
             </p>
           </div>
-          <div class="wrb-field">
-            <label class="wrb-label">Nachricht</label>
-            <textarea class="wrb-textarea" name="userMessage" placeholder="Optional" rows="3"></textarea>
-          </div>
-          <input type="hidden" name="action" value="${i(e.action)}">
+          <input type="hidden" name="action" value="${l(e.action)}">
           ${o ? `<input type="hidden" name="successUrl" value="${o}">` : ""}
-          ${l ? `<input type="hidden" name="errorUrl" value="${l}">` : ""}`;
+          ${i ? `<input type="hidden" name="errorUrl" value="${i}">` : ""}`;
 }
-function Y(e) {
-  const r = e.companyName ? `Widerruf – ${i(e.companyName)}` : "Widerrufsformular", t = i(e.formAction ?? e.apiUrl ?? "/rest/v1/apiCancellation");
+function K(e) {
+  const r = e.companyName ? `Widerruf – ${l(e.companyName)}` : "Widerrufsformular", t = l(e.formAction ?? e.apiUrl ?? "/rest/v1/apiCancellation");
   return `<!DOCTYPE html>
 <html lang="de">
 <head>
@@ -626,12 +610,12 @@ function Y(e) {
         <h1 class="wrb-modal-title">${r}</h1>
       </div>
       <div class="wrb-modal-body">
-        ${e.introText ? `<p class="wrb-intro">${i(e.introText)}</p>` : ""}
+        ${e.introText ? `<p class="wrb-intro">${l(e.introText)}</p>` : ""}
         <form method="POST" action="${t}" novalidate>
-          ${M(e)}
+          ${T(e)}
           <div class="wrb-actions">
             <button type="submit" class="wrb-submit-btn">
-              ${i(e.submitLabel ?? "Absenden")}
+              ${l(e.submitLabel ?? "Absenden")}
             </button>
           </div>
         </form>
@@ -642,12 +626,12 @@ function Y(e) {
 </body>
 </html>`;
 }
-function _(e, { inlineStyles: r = !0 } = {}) {
-  const t = e.companyName ? `Widerruf – ${i(e.companyName)}` : "Widerrufsformular", o = i(e.formAction ?? e.apiUrl ?? "/rest/v1/apiCancellation"), l = `
+function Y(e, { inlineStyles: r = !0 } = {}) {
+  const t = e.companyName ? `Widerruf – ${l(e.companyName)}` : "Widerrufsformular", o = l(e.formAction ?? e.apiUrl ?? "/rest/v1/apiCancellation"), i = `
 #wrb-modal, #wrb-success, #wrb-error { display: none; }
 #wrb-modal:target, #wrb-success:target, #wrb-error:target { display: flex; }`;
-  return `${r ? `<style>${l}
-${$}</style>` : `<style>${l}</style>`}
+  return `${r ? `<style>${i}
+${$}</style>` : `<style>${i}</style>`}
 
 <!-- Widerruf: Form-Modal -->
 <div id="wrb-modal" class="wrb-overlay" role="dialog" aria-modal="true" aria-labelledby="wrb-modal-title">
@@ -657,13 +641,13 @@ ${$}</style>` : `<style>${l}</style>`}
       <a href="#" class="wrb-close-btn" aria-label="Schließen">✕</a>
     </div>
     <div class="wrb-modal-body">
-      ${e.introText ? `<p class="wrb-intro">${i(e.introText)}</p>` : ""}
+      ${e.introText ? `<p class="wrb-intro">${l(e.introText)}</p>` : ""}
       <form method="POST" action="${o}" novalidate>
-        ${M(e, "#wrb-success", "#wrb-error")}
+        ${T(e, "#wrb-success", "#wrb-error")}
         <div class="wrb-actions">
-          <a href="#" class="wrb-cancel-btn">${i(e.cancelLabel ?? "Abbrechen")}</a>
+          <a href="#" class="wrb-cancel-btn">${l(e.cancelLabel ?? "Abbrechen")}</a>
           <button type="submit" class="wrb-submit-btn">
-            ${i(e.submitLabel ?? "Absenden")}
+            ${l(e.submitLabel ?? "Absenden")}
           </button>
         </div>
       </form>
@@ -715,8 +699,8 @@ ${$}</style>` : `<style>${l}</style>`}
 </div>`;
 }
 export {
-  U as WiderrufsModal,
-  K as WiderrufsWidget,
-  Y as generateFallbackHtml,
-  _ as generateModalHtml
+  I as WiderrufsModal,
+  R as WiderrufsWidget,
+  K as generateFallbackHtml,
+  Y as generateModalHtml
 };

package/dist/types.d.ts

@@ -1,7 +1,3 @@
-export interface LegalLink {
-    name: string;
-    href: string;
-}
 export interface WiderrufsConfig {
     /** PATCH endpoint, e.g. /rest/v1/systemLog */
     apiUrl: string;
@@ -23,8 +19,10 @@ export interface WiderrufsConfig {
     cancelLabel?: string;
     /** Label for the submit button (default: "Absenden") */
     submitLabel?: string;
-    /** Legal navigation links shown in modal footer and static fallback page */
-    legalLinks?: LegalLink[];
+    /** Label for the privacy policy link shown in the modal footer */
+    privacyLabel?: string;
+    /** URL for the privacy policy link shown in the modal footer */
+    privacyUrl?: string;
     /** POST action URL for the static HTML fallback form (defaults to apiUrl) */
     formAction?: string;
     /** Redirect URL after successful form submit (static fallback / no-JS modal) */
@@ -42,6 +40,5 @@ export interface WiderrufsFormData {
     email: string;
     orderNumber: string;
     reason: string;
-    userMessage: string;
 }
 export type SubmitStatus = 'idle' | 'loading' | 'success' | 'error';

package/dist/widerruf.html

@@ -296,10 +296,6 @@
               Freiwillige Angabe – ein Widerruf ist ohne Angabe von Gründen möglich.
             </p>
           </div>
-          <div class="wrb-field">
-            <label class="wrb-label">Nachricht</label>
-            <textarea class="wrb-textarea" name="userMessage" placeholder="Optional" rows="3"></textarea>
-          </div>
           <input type="hidden" name="action" value="widerruf_submit">