@netlib/widerrufsbutton 1.1.2 → 1.2.0

package/dist/index.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),b=require("react"),C=require("react-dom");async function L(e,t){const n={"Content-Type":"application/json"};e.authToken&&(n.Authorization=`Bearer ${e.authToken}`);const d={action:e.action,payload:{...t,datum:new Date().toISOString()}},i=await fetch(e.apiUrl,{method:"PATCH",headers:n,body:JSON.stringify(d)});let l;try{l=await i.json()}catch{if(!i.ok)throw new Error(`Server antwortete mit Status ${i.status}`);return}if(l!==null&&typeof l=="object"&&"ok"in l&&l.ok===!1){const s=l.message;throw new Error(typeof s=="string"&&s?s:`Server antwortete mit Status ${i.status}`)}if(!i.ok)throw new Error(`Server antwortete mit Status ${i.status}`)}const z=new Date().toLocaleDateString("de-DE",{day:"2-digit",month:"2-digit",year:"numeric"}),T={name:"",email:"",vertragId:"",widerrufsgrund:"",datum:z};function j(e){const t={};return e.name.trim()||(t.name="Bitte geben Sie Ihren Namen an."),e.email.trim()?/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e.email)||(t.email="Bitte geben Sie eine gültige E-Mail-Adresse an."):t.email="Bitte geben Sie Ihre E-Mail-Adresse an.",e.vertragId.trim()||(t.vertragId="Bitte geben Sie die Bestellnummer oder Vertragsnummer an."),t}function W({config:e,onClose:t}){const[n,d]=b.useState(T),[i,l]=b.useState({}),[s,p]=b.useState({}),[x,y]=b.useState("idle"),[k,N]=b.useState(""),S=b.useRef(null);b.useEffect(()=>{var c;(c=S.current)==null||c.focus();const a=o=>o.key==="Escape"&&t();return document.addEventListener("keydown",a),()=>document.removeEventListener("keydown",a)},[t]);function w(a,c){const o={...n,[a]:c};if(d(o),s[a]){const h=j(o);l(g=>({...g,[a]:h[a]}))}}function v(a){p(o=>({...o,[a]:!0}));const c=j(n);l(o=>({...o,[a]:c[a]}))}async function I(a){var h,g;a.preventDefault();const c=Object.fromEntries(Object.keys(n).map(f=>[f,!0]));p(c);const o=j(n);if(l(o),!(Object.keys(o).length>0)){y("loading"),N("");try{await L(e,n),y("success"),(h=e.onSuccess)==null||h.call(e)}catch(f){const E=f instanceof Error?f:new Error("Ein unbekannter Fehler ist aufgetreten.");N(E.message),y("error"),(g=e.onError)==null||g.call(e,E)}}}const A=e.companyName?`Widerruf – ${e.companyName}`:"Widerrufsformular";return r.jsx("div",{className:"wrb-overlay",role:"dialog","aria-modal":"true","aria-labelledby":"wrb-title",onClick:a=>a.target===a.currentTarget&&t(),children:r.jsxs("div",{className:"wrb-modal",children:[r.jsxs("div",{className:"wrb-modal-header",children:[r.jsx("h2",{className:"wrb-modal-title",id:"wrb-title",children:A}),r.jsx("button",{className:"wrb-close-btn",onClick:t,"aria-label":"Schließen",type:"button",children:"✕"})]}),x==="success"?r.jsxs("div",{className:"wrb-modal-body",children:[r.jsxs("div",{className:"wrb-success",children:[r.jsx("span",{className:"wrb-success-icon",children:"✓"}),r.jsx("h3",{children:"Widerruf eingegangen"}),r.jsxs("p",{children:["Ihr Widerruf wurde erfolgreich übermittelt. Sie erhalten in Kürze eine Bestätigung an ",r.jsx("strong",{children:n.email}),"."]})]}),r.jsx($,{links:e.legalLinks})]}):r.jsxs("div",{className:"wrb-modal-body",children:[e.introText&&r.jsx("p",{className:"wrb-intro",children:e.introText}),x==="error"&&k&&r.jsx("div",{className:"wrb-alert wrb-alert-error",role:"alert",children:k}),r.jsxs("form",{onSubmit:I,noValidate:!0,children:[r.jsx(m,{label:"Name",required:!0,error:s.name?i.name:void 0,children:r.jsx("input",{ref:S,className:`wrb-input${s.name&&i.name?" wrb-error":""}`,type:"text",autoComplete:"name",value:n.name,onChange:a=>w("name",a.target.value),onBlur:()=>v("name"),placeholder:"Vor- und Nachname"})}),r.jsx(m,{label:"E-Mail-Adresse",required:!0,hint:"Hierüber erhalten Sie die Eingangsbestätigung.",error:s.email?i.email:void 0,children:r.jsx("input",{className:`wrb-input${s.email&&i.email?" wrb-error":""}`,type:"email",autoComplete:"email",value:n.email,onChange:a=>w("email",a.target.value),onBlur:()=>v("email"),placeholder:"name@beispiel.de"})}),r.jsx(m,{label:"Bestell- / Auftrags- / Vertragsnummer",required:!0,hint:"Zu finden in Ihrer Bestellbestätigung.",error:s.vertragId?i.vertragId:void 0,children:r.jsx("input",{className:`wrb-input${s.vertragId&&i.vertragId?" wrb-error":""}`,type:"text",value:n.vertragId,onChange:a=>w("vertragId",a.target.value),onBlur:()=>v("vertragId"),placeholder:"z.B. 10045678"})}),r.jsx(m,{label:"Widerrufsgrund",hint:"Freiwillige Angabe – ein Widerruf ist ohne Angabe von Gründen möglich.",children:r.jsx("textarea",{className:"wrb-textarea",value:n.widerrufsgrund,onChange:a=>w("widerrufsgrund",a.target.value),placeholder:"Optional",rows:3})}),r.jsx(m,{label:"Datum der Widerrufserklärung",children:r.jsx("div",{className:"wrb-date-display",children:z})}),r.jsxs("div",{className:"wrb-actions",children:[r.jsx("button",{type:"button",className:"wrb-cancel-btn",onClick:t,children:e.cancelLabel??"Abbrechen"}),r.jsx("button",{type:"submit",className:"wrb-submit-btn",disabled:x==="loading",children:x==="loading"?"Wird gesendet…":e.submitLabel??"Absenden"})]})]}),r.jsx($,{links:e.legalLinks})]})]})})}function m({label:e,required:t,hint:n,error:d,children:i}){return r.jsxs("div",{className:"wrb-field",children:[r.jsxs("label",{className:"wrb-label",children:[e,t&&r.jsx("span",{className:"wrb-required","aria-hidden":"true",children:"*"})]}),i,n&&!d&&r.jsx("p",{className:"wrb-hint",children:n}),d&&r.jsx("p",{className:"wrb-field-error",role:"alert",children:d})]})}function $({links:e}){return e!=null&&e.length?r.jsx("div",{className:"wrb-legal-links",children:e.map(t=>r.jsx("a",{href:t.href,className:"wrb-legal-link",target:"_blank",rel:"noopener noreferrer",children:t.name},t.href))}):null}const B=`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),c=require("react"),q=require("react-dom");async function F(e,t){const a={"Content-Type":"application/json"};e.authToken&&(a.Authorization=`Bearer ${e.authToken}`);const o={action:e.action,payload:{...t,datum:new Date().toISOString()}},s=await fetch(e.apiUrl,{method:"PATCH",headers:a,body:JSON.stringify(o)});let i;try{i=await s.json()}catch{if(!s.ok)throw new Error(`Server antwortete mit Status ${s.status}`);return}if(i!==null&&typeof i=="object"&&"ok"in i&&i.ok===!1){const d=i.message;throw new Error(typeof d=="string"&&d?d:`Server antwortete mit Status ${s.status}`)}if(!s.ok)throw new Error(`Server antwortete mit Status ${s.status}`)}const A=new Date().toLocaleDateString("de-DE",{day:"2-digit",month:"2-digit",year:"numeric"}),O={name:"",email:"",orderNumber:"",reason:"",datum:A};function j(e){const t={};return e.name.trim()||(t.name="Bitte geben Sie Ihren Namen an."),e.email.trim()?/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e.email)||(t.email="Bitte geben Sie eine gültige E-Mail-Adresse an."):t.email="Bitte geben Sie Ihre E-Mail-Adresse an.",e.orderNumber.trim()||(t.orderNumber="Bitte geben Sie die Bestellnummer oder Vertragsnummer an."),t}function B({config:e,onClose:t}){const[a,o]=c.useState(O),[s,i]=c.useState({}),[d,N]=c.useState({}),[p,v]=c.useState("idle"),[S,$]=c.useState(""),E=c.useRef(null);c.useEffect(()=>{var u;(u=E.current)==null||u.focus();const n=b=>b.key==="Escape"&&t();return document.addEventListener("keydown",n),()=>document.removeEventListener("keydown",n)},[t]);function w(n,u){const b={...a,[n]:u};if(o(b),d[n]){const h=j(b);i(x=>({...x,[n]:h[n]}))}}function y(n){N(b=>({...b,[n]:!0}));const u=j(a);i(b=>({...b,[n]:u[n]}))}async function L(n){var h,x;n.preventDefault();const u=Object.fromEntries(Object.keys(a).map(f=>[f,!0]));N(u);const b=j(a);if(i(b),!(Object.keys(b).length>0)){v("loading"),$("");try{await F(e,a),v("success"),(h=e.onSuccess)==null||h.call(e)}catch(f){const W=f instanceof Error?f:new Error("Ein unbekannter Fehler ist aufgetreten.");$(W.message),v("error"),(x=e.onError)==null||x.call(e,W)}}}const M=e.companyName?`Widerruf – ${e.companyName}`:"Widerrufsformular";return r.jsx("div",{className:"wrb-overlay",role:"dialog","aria-modal":"true","aria-labelledby":"wrb-title",onClick:n=>n.target===n.currentTarget&&t(),children:r.jsxs("div",{className:"wrb-modal",children:[r.jsxs("div",{className:"wrb-modal-header",children:[r.jsx("h2",{className:"wrb-modal-title",id:"wrb-title",children:M}),r.jsx("button",{className:"wrb-close-btn",onClick:t,"aria-label":"Schließen",type:"button",children:"✕"})]}),p==="success"?r.jsxs("div",{className:"wrb-modal-body",children:[r.jsxs("div",{className:"wrb-success",children:[r.jsx("span",{className:"wrb-success-icon",children:"✓"}),r.jsx("h3",{children:"Widerruf eingegangen"}),r.jsxs("p",{children:["Ihr Widerruf wurde erfolgreich übermittelt. Sie erhalten in Kürze eine Bestätigung an ",r.jsx("strong",{children:a.email}),"."]})]}),r.jsx(z,{links:e.legalLinks})]}):r.jsxs("div",{className:"wrb-modal-body",children:[e.introText&&r.jsx("p",{className:"wrb-intro",children:e.introText}),p==="error"&&S&&r.jsx("div",{className:"wrb-alert wrb-alert-error",role:"alert",children:S}),r.jsxs("form",{onSubmit:L,noValidate:!0,children:[r.jsx(m,{label:"Name",required:!0,error:d.name?s.name:void 0,children:r.jsx("input",{ref:E,className:`wrb-input${d.name&&s.name?" wrb-error":""}`,type:"text",autoComplete:"name",value:a.name,onChange:n=>w("name",n.target.value),onBlur:()=>y("name"),placeholder:"Vor- und Nachname"})}),r.jsx(m,{label:"E-Mail-Adresse",required:!0,hint:"Hierüber erhalten Sie die Eingangsbestätigung.",error:d.email?s.email:void 0,children:r.jsx("input",{className:`wrb-input${d.email&&s.email?" wrb-error":""}`,type:"email",autoComplete:"email",value:a.email,onChange:n=>w("email",n.target.value),onBlur:()=>y("email"),placeholder:"name@beispiel.de"})}),r.jsx(m,{label:"Bestell- / Auftrags- / Vertragsnummer",required:!0,hint:"Zu finden in Ihrer Bestellbestätigung.",error:d.orderNumber?s.orderNumber:void 0,children:r.jsx("input",{className:`wrb-input${d.orderNumber&&s.orderNumber?" wrb-error":""}`,type:"text",value:a.orderNumber,onChange:n=>w("orderNumber",n.target.value),onBlur:()=>y("orderNumber"),placeholder:"z.B. 10045678"})}),r.jsx(m,{label:"reason",hint:"Freiwillige Angabe – ein Widerruf ist ohne Angabe von Gründen möglich.",children:r.jsx("textarea",{className:"wrb-textarea",value:a.reason,onChange:n=>w("reason",n.target.value),placeholder:"Optional",rows:3})}),r.jsx(m,{label:"Datum der Widerrufserklärung",children:r.jsx("div",{className:"wrb-date-display",children:A})}),r.jsxs("div",{className:"wrb-actions",children:[r.jsx("button",{type:"button",className:"wrb-cancel-btn",onClick:t,children:e.cancelLabel??"Abbrechen"}),r.jsx("button",{type:"submit",className:"wrb-submit-btn",disabled:p==="loading",children:p==="loading"?"Wird gesendet…":e.submitLabel??"Absenden"})]})]}),r.jsx(z,{links:e.legalLinks})]})]})})}function m({label:e,required:t,hint:a,error:o,children:s}){return r.jsxs("div",{className:"wrb-field",children:[r.jsxs("label",{className:"wrb-label",children:[e,t&&r.jsx("span",{className:"wrb-required","aria-hidden":"true",children:"*"})]}),s,a&&!o&&r.jsx("p",{className:"wrb-hint",children:a}),o&&r.jsx("p",{className:"wrb-field-error",role:"alert",children:o})]})}function z({links:e}){return e!=null&&e.length?r.jsx("div",{className:"wrb-legal-links",children:e.map(t=>r.jsx("a",{href:t.href,className:"wrb-legal-link",target:"_blank",rel:"noopener noreferrer",children:t.name},t.href))}):null}const k=`
 /* Widerrufsbutton widget — prefix: wrb- */
 .wrb-btn {
   display: inline-flex;
@@ -158,6 +158,10 @@
   border-top: 1px solid #e5e7eb;
 }
 .wrb-submit-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
   padding: 10px 22px;
   background: #c0392b;
   color: #fff;
@@ -172,6 +176,10 @@
 .wrb-submit-btn:hover:not(:disabled) { background: #a93226; }
 .wrb-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
 .wrb-cancel-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
   padding: 10px 18px;
   background: transparent;
   color: #374151;
@@ -219,65 +227,24 @@
   color: #374151;
   text-decoration: underline;
 }
-`;function q(){const e="wrb-styles";if(document.getElementById(e))return;const t=document.createElement("style");t.id=e,t.textContent=B,document.head.appendChild(t)}function O({config:e}){const[t,n]=b.useState(!1);return b.useEffect(()=>{q()},[]),r.jsxs(r.Fragment,{children:[r.jsx("button",{type:"button",className:`wrb-btn${e.buttonClass?` ${e.buttonClass}`:""}`,onClick:()=>n(!0),children:e.buttonLabel??"Vertrag widerrufen"}),t&&C.createPortal(r.jsx(W,{config:e,onClose:()=>n(!1)}),document.body)]})}function u(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function D(e){var s;const t=new Date().toLocaleDateString("de-DE",{day:"2-digit",month:"2-digit",year:"numeric"}),n=e.companyName?`Widerruf – ${u(e.companyName)}`:"Widerrufsformular",d=u(e.formAction??e.apiUrl??"/rest/v1/apiCancellation"),i=e.introText?`<p class="wrb-intro">${u(e.introText)}</p>`:"",l=(s=e.legalLinks)!=null&&s.length?`
+`;function D(){const e="wrb-styles";if(document.getElementById(e))return;const t=document.createElement("style");t.id=e,t.textContent=k,document.head.appendChild(t)}function I({config:e}){const[t,a]=c.useState(!1);return c.useEffect(()=>{D()},[]),r.jsxs(r.Fragment,{children:[r.jsx("button",{type:"button",className:`wrb-btn${e.buttonClass?` ${e.buttonClass}`:""}`,onClick:()=>a(!0),children:e.buttonLabel??"Vertrag widerrufen"}),t&&q.createPortal(r.jsx(B,{config:e,onClose:()=>a(!1)}),document.body)]})}function l(e){return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function T(){return new Date().toLocaleDateString("de-DE",{day:"2-digit",month:"2-digit",year:"numeric"})}function g(e){var t;return(t=e.legalLinks)!=null&&t.length?`
       <div class="wrb-legal-links">
-        ${e.legalLinks.map(p=>`<a href="${u(p.href)}" class="wrb-legal-link" rel="noopener noreferrer">${u(p.name)}</a>`).join(`
+        ${e.legalLinks.map(a=>`<a href="${l(a.href)}" class="wrb-legal-link" rel="noopener noreferrer">${l(a.name)}</a>`).join(`
         `)}
-      </div>`:"";return`<!DOCTYPE html>
-<html lang="de">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>${n}</title>
-  <style>
-    *, *::before, *::after { box-sizing: border-box; }
-    body { margin: 0; background: #f9fafb; }
-    .wrb-page {
-      min-height: 100vh;
-      display: flex;
-      align-items: flex-start;
-      justify-content: center;
-      padding: 40px 16px;
-    }
-    .wrb-page .wrb-modal { max-height: none; }
-    .wrb-page .wrb-modal-title { font-size: 20px; }
-    ${B}
-  </style>
-</head>
-<body>
-  <div class="wrb-page">
-    <div class="wrb-modal">
-      <div class="wrb-modal-header">
-        <h1 class="wrb-modal-title">${n}</h1>
-      </div>
-      <div class="wrb-modal-body">
-        ${i}
-        <form method="POST" action="${d}" novalidate>
+      </div>`:""}function C(e,t,a="",o=""){const s=l(e.successUrl??a),i=l(e.errorUrl??o);return`
           <div class="wrb-field">
             <label class="wrb-label">
               Name <span class="wrb-required" aria-hidden="true">*</span>
             </label>
-            <input
-              class="wrb-input"
-              type="text"
-              name="name"
-              autocomplete="name"
-              placeholder="Vor- und Nachname"
-              required
-            >
+            <input class="wrb-input" type="text" name="name" autocomplete="name"
+              placeholder="Vor- und Nachname" required>
           </div>
           <div class="wrb-field">
             <label class="wrb-label">
               E-Mail-Adresse <span class="wrb-required" aria-hidden="true">*</span>
             </label>
-            <input
-              class="wrb-input"
-              type="email"
-              name="email"
-              autocomplete="email"
-              placeholder="name@beispiel.de"
-              required
-            >
+            <input class="wrb-input" type="email" name="email" autocomplete="email"
+              placeholder="name@beispiel.de" required>
             <p class="wrb-hint">Hierüber erhalten Sie die Eingangsbestätigung.</p>
           </div>
           <div class="wrb-field">
@@ -285,23 +252,13 @@
               Bestell- / Auftrags- / Vertragsnummer
               <span class="wrb-required" aria-hidden="true">*</span>
             </label>
-            <input
-              class="wrb-input"
-              type="text"
-              name="vertragId"
-              placeholder="z.B. 10045678"
-              required
-            >
+            <input class="wrb-input" type="text" name="orderNumber"
+              placeholder="z.B. 10045678" required>
             <p class="wrb-hint">Zu finden in Ihrer Bestellbestätigung.</p>
           </div>
           <div class="wrb-field">
-            <label class="wrb-label">Widerrufsgrund</label>
-            <textarea
-              class="wrb-textarea"
-              name="widerrufsgrund"
-              placeholder="Optional"
-              rows="3"
-            ></textarea>
+            <label class="wrb-label">reason</label>
+            <textarea class="wrb-textarea" name="reason" placeholder="Optional" rows="3"></textarea>
             <p class="wrb-hint">
               Freiwillige Angabe – ein Widerruf ist ohne Angabe von Gründen möglich.
             </p>
@@ -311,17 +268,116 @@
             <div class="wrb-date-display">${t}</div>
             <input type="hidden" name="datum" value="${t}">
           </div>
-          <input type="hidden" name="action" value="${u(e.action)}">
-          ${e.successUrl?`<input type="hidden" name="successUrl" value="${u(e.successUrl)}">`:""}
+          <input type="hidden" name="action" value="${l(e.action)}">
+          ${s?`<input type="hidden" name="successUrl" value="${s}">`:""}
+          ${i?`<input type="hidden" name="errorUrl" value="${i}">`:""}`}function U(e){const t=T(),a=e.companyName?`Widerruf – ${l(e.companyName)}`:"Widerrufsformular",o=l(e.formAction??e.apiUrl??"/rest/v1/apiCancellation");return`<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${a}</title>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; }
+    body { margin: 0; background: #f9fafb; }
+    .wrb-page {
+      min-height: 100vh;
+      display: flex;
+      align-items: flex-start;
+      justify-content: center;
+      padding: 40px 16px;
+    }
+    .wrb-page .wrb-modal { max-height: none; }
+    .wrb-page .wrb-modal-title { font-size: 20px; }
+    ${k}
+  </style>
+</head>
+<body>
+  <div class="wrb-page">
+    <div class="wrb-modal">
+      <div class="wrb-modal-header">
+        <h1 class="wrb-modal-title">${a}</h1>
+      </div>
+      <div class="wrb-modal-body">
+        ${e.introText?`<p class="wrb-intro">${l(e.introText)}</p>`:""}
+        <form method="POST" action="${o}" novalidate>
+          ${C(e,t)}
           <div class="wrb-actions">
             <button type="submit" class="wrb-submit-btn">
-              ${u(e.submitLabel??"Absenden")}
+              ${l(e.submitLabel??"Absenden")}
             </button>
           </div>
         </form>
-        ${l}
+        ${g(e)}
       </div>
     </div>
   </div>
 </body>
-</html>`}exports.WiderrufsModal=W;exports.WiderrufsWidget=O;exports.generateFallbackHtml=D;
+</html>`}function H(e,{inlineStyles:t=!0}={}){const a=T(),o=e.companyName?`Widerruf – ${l(e.companyName)}`:"Widerrufsformular",s=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`${t?`<style>${i}
+${k}</style>`:`<style>${i}</style>`}
+
+<!-- Widerruf: Form-Modal -->
+<div id="wrb-modal" class="wrb-overlay" role="dialog" aria-modal="true" aria-labelledby="wrb-modal-title">
+  <div class="wrb-modal">
+    <div class="wrb-modal-header">
+      <h2 class="wrb-modal-title" id="wrb-modal-title">${o}</h2>
+      <a href="#" class="wrb-close-btn" aria-label="Schließen">✕</a>
+    </div>
+    <div class="wrb-modal-body">
+      ${e.introText?`<p class="wrb-intro">${l(e.introText)}</p>`:""}
+      <form method="POST" action="${s}" novalidate>
+        ${C(e,a,"#wrb-success","#wrb-error")}
+        <div class="wrb-actions">
+          <a href="#" class="wrb-cancel-btn">${l(e.cancelLabel??"Abbrechen")}</a>
+          <button type="submit" class="wrb-submit-btn">
+            ${l(e.submitLabel??"Absenden")}
+          </button>
+        </div>
+      </form>
+      ${g(e)}
+    </div>
+  </div>
+</div>
+
+<!-- Widerruf: Success-Modal -->
+<div id="wrb-success" class="wrb-overlay" role="dialog" aria-modal="true">
+  <div class="wrb-modal">
+    <div class="wrb-modal-header">
+      <h2 class="wrb-modal-title">Widerruf eingegangen</h2>
+      <a href="#" class="wrb-close-btn" aria-label="Schließen">✕</a>
+    </div>
+    <div class="wrb-modal-body">
+      <div class="wrb-success">
+        <span class="wrb-success-icon">✓</span>
+        <h3>Widerruf eingegangen</h3>
+        <p>
+          Ihr Widerruf wurde erfolgreich übermittelt. Sie erhalten in Kürze eine
+          Bestätigung per E-Mail.
+        </p>
+      </div>
+      ${g(e)}
+    </div>
+  </div>
+</div>
+
+<!-- Widerruf: Error-Modal -->
+<div id="wrb-error" class="wrb-overlay" role="alertdialog" aria-modal="true">
+  <div class="wrb-modal">
+    <div class="wrb-modal-header">
+      <h2 class="wrb-modal-title">Fehler beim Senden</h2>
+      <a href="#" class="wrb-close-btn" aria-label="Schließen">✕</a>
+    </div>
+    <div class="wrb-modal-body">
+      <div class="wrb-alert wrb-alert-error" role="alert">
+        Ihr Widerruf konnte leider nicht übermittelt werden. Bitte versuchen Sie es
+        erneut oder kontaktieren Sie uns direkt.
+      </div>
+      <div class="wrb-actions">
+        <a href="#" class="wrb-cancel-btn">Schließen</a>
+        <a href="#wrb-modal" class="wrb-submit-btn">Erneut versuchen</a>
+      </div>
+      ${g(e)}
+    </div>
+  </div>
+</div>`}exports.WiderrufsModal=B;exports.WiderrufsWidget=I;exports.generateFallbackHtml=U;exports.generateModalHtml=H;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export { WiderrufsWidget } from './components/WiderrufsWidget';
 export { WiderrufsModal } from './components/WiderrufsModal';
-export { generateFallbackHtml } from './fallback';
+export { generateFallbackHtml, generateModalHtml } from './fallback';
 export type { WiderrufsConfig, WiderrufsFormData, SubmitStatus, LegalLink } from './types';