@netlib/widerrufsbutton 1.0.5

package/dist/index.es.js

@@ -0,0 +1,459 @@
+import { jsx as r, jsxs as s, Fragment as C } from "react/jsx-runtime";
+import { useState as u, useRef as W, useEffect as E } from "react";
+import { createPortal as A } from "react-dom";
+async function j(e, a) {
+  const n = {
+    "Content-Type": "application/json"
+  };
+  e.authToken && (n.Authorization = `Bearer ${e.authToken}`);
+  const d = {
+    action: e.action,
+    payload: {
+      ...a,
+      datum: (/* @__PURE__ */ new Date()).toISOString()
+    }
+  }, i = await fetch(e.apiUrl, {
+    method: "PATCH",
+    headers: n,
+    body: JSON.stringify(d)
+  });
+  if (!i.ok)
+    throw new Error(`Server antwortete mit Status ${i.status}`);
+}
+const z = (/* @__PURE__ */ new Date()).toLocaleDateString("de-DE", {
+  day: "2-digit",
+  month: "2-digit",
+  year: "numeric"
+}), T = {
+  name: "",
+  email: "",
+  vertragId: "",
+  widerrufsgrund: "",
+  datum: z
+};
+function x(e) {
+  const a = {};
+  return e.name.trim() || (a.name = "Bitte geben Sie Ihren Namen an."), e.email.trim() ? /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e.email) || (a.email = "Bitte geben Sie eine gültige E-Mail-Adresse an.") : a.email = "Bitte geben Sie Ihre E-Mail-Adresse an.", e.vertragId.trim() || (a.vertragId = "Bitte geben Sie die Bestellnummer oder Vertragsnummer an."), a;
+}
+function O({ config: e, onClose: a }) {
+  const [n, d] = u(T), [i, g] = u({}), [c, y] = u({}), [m, h] = u("idle"), [v, k] = u(""), N = W(null);
+  E(() => {
+    var l;
+    (l = N.current) == null || l.focus();
+    const t = (o) => o.key === "Escape" && a();
+    return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
+  }, [a]);
+  function f(t, l) {
+    const o = { ...n, [t]: l };
+    if (d(o), c[t]) {
+      const b = x(o);
+      g((B) => ({ ...B, [t]: b[t] }));
+    }
+  }
+  function w(t) {
+    y((o) => ({ ...o, [t]: !0 }));
+    const l = x(n);
+    g((o) => ({ ...o, [t]: l[t] }));
+  }
+  async function S(t) {
+    t.preventDefault();
+    const l = Object.fromEntries(
+      Object.keys(n).map((b) => [b, !0])
+    );
+    y(l);
+    const o = x(n);
+    if (g(o), !(Object.keys(o).length > 0)) {
+      h("loading"), k("");
+      try {
+        await j(e, n), h("success");
+      } catch (b) {
+        k(
+          b instanceof Error ? b.message : "Ein unbekannter Fehler ist aufgetreten."
+        ), h("error");
+      }
+    }
+  }
+  const I = e.companyName ? `Widerruf – ${e.companyName}` : "Widerrufsformular";
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: "wrb-overlay",
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": "wrb-title",
+      onClick: (t) => t.target === t.currentTarget && a(),
+      children: /* @__PURE__ */ s("div", { className: "wrb-modal", children: [
+        /* @__PURE__ */ s("div", { className: "wrb-modal-header", children: [
+          /* @__PURE__ */ r("h2", { className: "wrb-modal-title", id: "wrb-title", children: I }),
+          /* @__PURE__ */ r(
+            "button",
+            {
+              className: "wrb-close-btn",
+              onClick: a,
+              "aria-label": "Schließen",
+              type: "button",
+              children: "✕"
+            }
+          )
+        ] }),
+        m === "success" ? /* @__PURE__ */ s("div", { className: "wrb-success", children: [
+          /* @__PURE__ */ r("span", { className: "wrb-success-icon", children: "✓" }),
+          /* @__PURE__ */ r("h3", { children: "Widerruf eingegangen" }),
+          /* @__PURE__ */ s("p", { children: [
+            "Ihr Widerruf wurde erfolgreich übermittelt. Sie erhalten in Kürze eine Bestätigung an ",
+            /* @__PURE__ */ r("strong", { children: n.email }),
+            "."
+          ] })
+        ] }) : /* @__PURE__ */ s("div", { className: "wrb-modal-body", children: [
+          e.introText && /* @__PURE__ */ r("p", { className: "wrb-intro", children: e.introText }),
+          m === "error" && v && /* @__PURE__ */ r("div", { className: "wrb-alert wrb-alert-error", role: "alert", children: v }),
+          /* @__PURE__ */ s("form", { onSubmit: S, noValidate: !0, children: [
+            /* @__PURE__ */ r(
+              p,
+              {
+                label: "Name",
+                required: !0,
+                error: c.name ? i.name : void 0,
+                children: /* @__PURE__ */ r(
+                  "input",
+                  {
+                    ref: N,
+                    className: `wrb-input${c.name && i.name ? " wrb-error" : ""}`,
+                    type: "text",
+                    autoComplete: "name",
+                    value: n.name,
+                    onChange: (t) => f("name", t.target.value),
+                    onBlur: () => w("name"),
+                    placeholder: "Vor- und Nachname"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ r(
+              p,
+              {
+                label: "E-Mail-Adresse",
+                required: !0,
+                hint: "Hierüber erhalten Sie die Eingangsbestätigung.",
+                error: c.email ? i.email : void 0,
+                children: /* @__PURE__ */ r(
+                  "input",
+                  {
+                    className: `wrb-input${c.email && i.email ? " wrb-error" : ""}`,
+                    type: "email",
+                    autoComplete: "email",
+                    value: n.email,
+                    onChange: (t) => f("email", t.target.value),
+                    onBlur: () => w("email"),
+                    placeholder: "name@beispiel.de"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ r(
+              p,
+              {
+                label: "Bestell- / Auftrags- / Vertragsnummer",
+                required: !0,
+                hint: "Zu finden in Ihrer Bestellbestätigung.",
+                error: c.vertragId ? i.vertragId : void 0,
+                children: /* @__PURE__ */ r(
+                  "input",
+                  {
+                    className: `wrb-input${c.vertragId && i.vertragId ? " wrb-error" : ""}`,
+                    type: "text",
+                    value: n.vertragId,
+                    onChange: (t) => f("vertragId", t.target.value),
+                    onBlur: () => w("vertragId"),
+                    placeholder: "z.B. 10045678"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ r(
+              p,
+              {
+                label: "Widerrufsgrund",
+                hint: "Freiwillige Angabe – ein Widerruf ist ohne Angabe von Gründen möglich.",
+                children: /* @__PURE__ */ r(
+                  "textarea",
+                  {
+                    className: "wrb-textarea",
+                    value: n.widerrufsgrund,
+                    onChange: (t) => f("widerrufsgrund", t.target.value),
+                    placeholder: "Optional",
+                    rows: 3
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ r(p, { label: "Datum der Widerrufserklärung", children: /* @__PURE__ */ r("div", { className: "wrb-date-display", children: z }) }),
+            /* @__PURE__ */ s("div", { className: "wrb-actions", children: [
+              /* @__PURE__ */ r(
+                "button",
+                {
+                  type: "button",
+                  className: "wrb-cancel-btn",
+                  onClick: a,
+                  children: e.cancelLabel ?? "Abbrechen"
+                }
+              ),
+              /* @__PURE__ */ r(
+                "button",
+                {
+                  type: "submit",
+                  className: "wrb-submit-btn",
+                  disabled: m === "loading",
+                  children: m === "loading" ? "Wird gesendet…" : e.submitLabel ?? "Absenden"
+                }
+              )
+            ] })
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+function p({ label: e, required: a, hint: n, error: d, children: i }) {
+  return /* @__PURE__ */ s("div", { className: "wrb-field", children: [
+    /* @__PURE__ */ s("label", { className: "wrb-label", children: [
+      e,
+      a && /* @__PURE__ */ r("span", { className: "wrb-required", "aria-hidden": "true", children: "*" })
+    ] }),
+    i,
+    n && !d && /* @__PURE__ */ r("p", { className: "wrb-hint", children: n }),
+    d && /* @__PURE__ */ r("p", { className: "wrb-field-error", role: "alert", children: d })
+  ] });
+}
+function $() {
+  const e = "wrb-styles";
+  if (document.getElementById(e)) return;
+  const a = `
+/* Widerrufsbutton widget — prefix: wrb- */
+.wrb-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 20px;
+  background: #c0392b;
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  font-size: 15px;
+  font-weight: 600;
+  cursor: pointer;
+  font-family: inherit;
+  transition: background 0.2s;
+  text-decoration: none;
+}
+.wrb-btn:hover { background: #a93226; }
+.wrb-btn:focus-visible { outline: 3px solid #e74c3c; outline-offset: 2px; }
+
+/* Overlay */
+.wrb-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.55);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 99999;
+  padding: 16px;
+  animation: wrb-fade-in 0.15s ease;
+}
+@keyframes wrb-fade-in { from { opacity: 0 } to { opacity: 1 } }
+
+/* Modal box */
+.wrb-modal {
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+  width: 100%;
+  max-width: 540px;
+  max-height: 90vh;
+  overflow-y: auto;
+  animation: wrb-slide-up 0.2s ease;
+  font-family: system-ui, -apple-system, sans-serif;
+  font-size: 15px;
+  color: #1a1a1a;
+}
+@keyframes wrb-slide-up { from { transform: translateY(20px); opacity: 0 } to { transform: none; opacity: 1 } }
+
+.wrb-modal-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 20px 24px 16px;
+  border-bottom: 1px solid #e5e7eb;
+  gap: 12px;
+}
+.wrb-modal-title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+  color: #111;
+  line-height: 1.3;
+}
+.wrb-close-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: #6b7280;
+  padding: 4px;
+  border-radius: 4px;
+  font-size: 20px;
+  line-height: 1;
+  flex-shrink: 0;
+}
+.wrb-close-btn:hover { color: #111; background: #f3f4f6; }
+
+.wrb-modal-body {
+  padding: 20px 24px 24px;
+}
+
+.wrb-intro {
+  margin: 0 0 20px;
+  color: #4b5563;
+  line-height: 1.6;
+  font-size: 14px;
+}
+
+/* Form */
+.wrb-field {
+  margin-bottom: 16px;
+}
+.wrb-label {
+  display: block;
+  font-size: 13px;
+  font-weight: 600;
+  color: #374151;
+  margin-bottom: 5px;
+}
+.wrb-required {
+  color: #c0392b;
+  margin-left: 2px;
+}
+.wrb-input,
+.wrb-textarea {
+  width: 100%;
+  padding: 9px 12px;
+  border: 1.5px solid #d1d5db;
+  border-radius: 6px;
+  font-size: 15px;
+  font-family: inherit;
+  color: #111;
+  background: #fff;
+  box-sizing: border-box;
+  transition: border-color 0.15s;
+}
+.wrb-input:focus,
+.wrb-textarea:focus {
+  outline: none;
+  border-color: #c0392b;
+  box-shadow: 0 0 0 3px rgba(192,57,43,0.12);
+}
+.wrb-input.wrb-error,
+.wrb-textarea.wrb-error {
+  border-color: #c0392b;
+}
+.wrb-field-error {
+  color: #c0392b;
+  font-size: 12px;
+  margin-top: 4px;
+}
+.wrb-textarea { resize: vertical; min-height: 80px; }
+
+.wrb-hint {
+  font-size: 12px;
+  color: #6b7280;
+  margin-top: 4px;
+}
+
+.wrb-date-display {
+  padding: 9px 12px;
+  background: #f9fafb;
+  border: 1.5px solid #e5e7eb;
+  border-radius: 6px;
+  color: #6b7280;
+  font-size: 15px;
+}
+
+/* Actions */
+.wrb-actions {
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end;
+  margin-top: 24px;
+  padding-top: 16px;
+  border-top: 1px solid #e5e7eb;
+}
+.wrb-submit-btn {
+  padding: 10px 22px;
+  background: #c0392b;
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  font-size: 15px;
+  font-weight: 600;
+  cursor: pointer;
+  font-family: inherit;
+  transition: background 0.2s;
+}
+.wrb-submit-btn:hover:not(:disabled) { background: #a93226; }
+.wrb-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
+.wrb-cancel-btn {
+  padding: 10px 18px;
+  background: transparent;
+  color: #374151;
+  border: 1.5px solid #d1d5db;
+  border-radius: 6px;
+  font-size: 15px;
+  cursor: pointer;
+  font-family: inherit;
+  transition: background 0.15s;
+}
+.wrb-cancel-btn:hover { background: #f3f4f6; }
+
+/* Success / Error states */
+.wrb-success {
+  text-align: center;
+  padding: 32px 24px;
+}
+.wrb-success-icon { font-size: 48px; display: block; margin-bottom: 12px; }
+.wrb-success h3 { margin: 0 0 8px; font-size: 20px; color: #111; }
+.wrb-success p { margin: 0; color: #4b5563; line-height: 1.6; }
+
+.wrb-alert {
+  padding: 12px 16px;
+  border-radius: 6px;
+  margin-bottom: 16px;
+  font-size: 14px;
+}
+.wrb-alert-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
+`, n = document.createElement("style");
+  n.id = e, n.textContent = a, document.head.appendChild(n);
+}
+function L({ config: e }) {
+  const [a, n] = u(!1);
+  return E(() => {
+    $();
+  }, []), /* @__PURE__ */ s(C, { children: [
+    /* @__PURE__ */ r(
+      "button",
+      {
+        type: "button",
+        className: `wrb-btn${e.buttonClass ? ` ${e.buttonClass}` : ""}`,
+        onClick: () => n(!0),
+        children: e.buttonLabel ?? "Vertrag widerrufen"
+      }
+    ),
+    a && A(
+      /* @__PURE__ */ r(O, { config: e, onClose: () => n(!1) }),
+      document.body
+    )
+  ] });
+}
+export {
+  O as WiderrufsModal,
+  L as WiderrufsWidget
+};

package/dist/styles.d.ts

@@ -0,0 +1,2 @@
+/** Injects scoped CSS once into the document head */
+export declare function injectStyles(): void;

package/dist/types.d.ts

@@ -0,0 +1,28 @@
+export interface WiderrufsConfig {
+    /** PATCH endpoint, e.g. /rest/v1/systemLog */
+    apiUrl: string;
+    /** action name sent as {"action": "..."} */
+    action: string;
+    /** Introductory text shown at the top of the modal */
+    introText?: string;
+    /** Label for the trigger button (default: "Vertrag widerrufen") */
+    buttonLabel?: string;
+    /** CSS classes appended to the trigger button */
+    buttonClass?: string;
+    /** Name of the company/shop shown in the modal header */
+    companyName?: string;
+    /** Bearer token or API key for Authorization header */
+    authToken?: string;
+    /** Label for the cancel button (default: "Abbrechen") */
+    cancelLabel?: string;
+    /** Label for the submit button (default: "Widerruf bestätigen") */
+    submitLabel?: string;
+}
+export interface WiderrufsFormData {
+    name: string;
+    email: string;
+    vertragId: string;
+    widerrufsgrund: string;
+    datum: string;
+}
+export type SubmitStatus = 'idle' | 'loading' | 'success' | 'error';