@netlib/widerrufsbutton 1.0.5 → 1.1.0

package/README.md

@@ -4,7 +4,7 @@ Widerrufsformular einbettbares JavaScript-Widget (React + TypeScript, IIFE-Build
 
 ## Rechtliche Grundlage
 
-Pflichtfelder laut IT-Recht Kanzlei / § 356 BGB:
+Pflichtfelder:
 - **Name** des Verbrauchers
 - **E-Mail-Adresse** (für die gesetzlich vorgeschriebene Eingangsbestätigung)
 - **Bestell- / Auftrags- / Vertragsnummer** (Vertragsidentifikation)
@@ -57,24 +57,24 @@ Content-Type: application/json
 
 ## Konfigurationsparameter
 
-| Parameter | Typ | Pflicht | Beschreibung |
-|---|---|---|---|
-| `apiUrl` | string | ja | PATCH-Endpunkt |
-| `action` | string | ja | Action-Name, Default: `widerruf_submit` |
-| `introText` | string | – | Einleitungstext im Modal |
+| Parameter     | Typ | Pflicht | Beschreibung |
+|---------------|---|---|---|
+| `apiUrl`      | string | ja | PATCH-Endpunkt |
+| `action`      | string | ja | Action-Name, Default: `widerruf_submit` |
+| `introText`   | string | – | Einleitungstext im Modal |
 | `companyName` | string | – | Firmenname im Modal-Titel |
 | `buttonLabel` | string | – | Button-Beschriftung, Default: `Vertrag widerrufen` |
 | `cancelLabel` | string | – | Abbrechen-Button, Default: `Abbrechen` |
 | `submitLabel` | string | – | Absenden-Button, Default: `Widerruf bestätigen` |
 | `buttonClass` | string | – | Zusätzliche CSS-Klassen am Button |
-| `authToken` | string | – | Bearer-Token für `Authorization`-Header |
+| `cl`          | string | – | Bearer-Token für `Authorization`-Header |
 
 ## Einbindung
 
 ### Option A – React / Astro
 
 ```tsx
-import { WiderrufsWidget } from '@netlib-de/widerrufsbutton'
+import { WiderrufsWidget } from '@netlib/widerrufsbutton'
 
 <WiderrufsWidget config={{
   apiUrl: 'https://example.com/api',
@@ -84,7 +84,7 @@ import { WiderrufsWidget } from '@netlib-de/widerrufsbutton'
 }} />
 ```
 
-### Option B – IIFE / Data-Attribute (kein Framework nötig)
+### Option B – IIFE / Data-Attribute (kein Framework nötig)           but
 
 ```html
 <script src="widerrufsbutton.iife.js" defer></script>

package/dist/fallback.d.ts

@@ -0,0 +1,8 @@
+import { WiderrufsConfig } from './types';
+/**
+ * Generates a complete, self-contained HTML page for the Widerruf form.
+ * Works without JavaScript — the form submits via POST to config.formAction (or config.apiUrl).
+ * Integrators embed this via generateFallbackHtml(config) in Astro or serve the pre-built
+ * dist/widerruf.html from any web server (ColdFusion, nginx, etc.).
+ */
+export declare function generateFallbackHtml(config: WiderrufsConfig): string;

package/dist/index.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("react"),I=require("react-dom");async function W(r,a){const n={"Content-Type":"application/json"};r.authToken&&(n.Authorization=`Bearer ${r.authToken}`);const d={action:r.action,payload:{...a,datum:new Date().toISOString()}},i=await fetch(r.apiUrl,{method:"PATCH",headers:n,body:JSON.stringify(d)});if(!i.ok)throw new Error(`Server antwortete mit Status ${i.status}`)}const k=new Date().toLocaleDateString("de-DE",{day:"2-digit",month:"2-digit",year:"numeric"}),B={name:"",email:"",vertragId:"",widerrufsgrund:"",datum:k};function h(r){const a={};return r.name.trim()||(a.name="Bitte geben Sie Ihren Namen an."),r.email.trim()?/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(r.email)||(a.email="Bitte geben Sie eine gültige E-Mail-Adresse an."):a.email="Bitte geben Sie Ihre E-Mail-Adresse an.",r.vertragId.trim()||(a.vertragId="Bitte geben Sie die Bestellnummer oder Vertragsnummer an."),a}function N({config:r,onClose:a}){const[n,d]=s.useState(B),[i,x]=s.useState({}),[c,w]=s.useState({}),[p,f]=s.useState("idle"),[y,v]=s.useState(""),j=s.useRef(null);s.useEffect(()=>{var l;(l=j.current)==null||l.focus();const t=o=>o.key==="Escape"&&a();return document.addEventListener("keydown",t),()=>document.removeEventListener("keydown",t)},[a]);function m(t,l){const o={...n,[t]:l};if(d(o),c[t]){const b=h(o);x(z=>({...z,[t]:b[t]}))}}function g(t){w(o=>({...o,[t]:!0}));const l=h(n);x(o=>({...o,[t]:l[t]}))}async function S(t){t.preventDefault();const l=Object.fromEntries(Object.keys(n).map(b=>[b,!0]));w(l);const o=h(n);if(x(o),!(Object.keys(o).length>0)){f("loading"),v("");try{await W(r,n),f("success")}catch(b){v(b instanceof Error?b.message:"Ein unbekannter Fehler ist aufgetreten."),f("error")}}}const E=r.companyName?`Widerruf – ${r.companyName}`:"Widerrufsformular";return e.jsx("div",{className:"wrb-overlay",role:"dialog","aria-modal":"true","aria-labelledby":"wrb-title",onClick:t=>t.target===t.currentTarget&&a(),children:e.jsxs("div",{className:"wrb-modal",children:[e.jsxs("div",{className:"wrb-modal-header",children:[e.jsx("h2",{className:"wrb-modal-title",id:"wrb-title",children:E}),e.jsx("button",{className:"wrb-close-btn",onClick:a,"aria-label":"Schließen",type:"button",children:"✕"})]}),p==="success"?e.jsxs("div",{className:"wrb-success",children:[e.jsx("span",{className:"wrb-success-icon",children:"✓"}),e.jsx("h3",{children:"Widerruf eingegangen"}),e.jsxs("p",{children:["Ihr Widerruf wurde erfolgreich übermittelt. Sie erhalten in Kürze eine Bestätigung an ",e.jsx("strong",{children:n.email}),"."]})]}):e.jsxs("div",{className:"wrb-modal-body",children:[r.introText&&e.jsx("p",{className:"wrb-intro",children:r.introText}),p==="error"&&y&&e.jsx("div",{className:"wrb-alert wrb-alert-error",role:"alert",children:y}),e.jsxs("form",{onSubmit:S,noValidate:!0,children:[e.jsx(u,{label:"Name",required:!0,error:c.name?i.name:void 0,children:e.jsx("input",{ref:j,className:`wrb-input${c.name&&i.name?" wrb-error":""}`,type:"text",autoComplete:"name",value:n.name,onChange:t=>m("name",t.target.value),onBlur:()=>g("name"),placeholder:"Vor- und Nachname"})}),e.jsx(u,{label:"E-Mail-Adresse",required:!0,hint:"Hierüber erhalten Sie die Eingangsbestätigung.",error:c.email?i.email:void 0,children:e.jsx("input",{className:`wrb-input${c.email&&i.email?" wrb-error":""}`,type:"email",autoComplete:"email",value:n.email,onChange:t=>m("email",t.target.value),onBlur:()=>g("email"),placeholder:"name@beispiel.de"})}),e.jsx(u,{label:"Bestell- / Auftrags- / Vertragsnummer",required:!0,hint:"Zu finden in Ihrer Bestellbestätigung.",error:c.vertragId?i.vertragId:void 0,children:e.jsx("input",{className:`wrb-input${c.vertragId&&i.vertragId?" wrb-error":""}`,type:"text",value:n.vertragId,onChange:t=>m("vertragId",t.target.value),onBlur:()=>g("vertragId"),placeholder:"z.B. 10045678"})}),e.jsx(u,{label:"Widerrufsgrund",hint:"Freiwillige Angabe – ein Widerruf ist ohne Angabe von Gründen möglich.",children:e.jsx("textarea",{className:"wrb-textarea",value:n.widerrufsgrund,onChange:t=>m("widerrufsgrund",t.target.value),placeholder:"Optional",rows:3})}),e.jsx(u,{label:"Datum der Widerrufserklärung",children:e.jsx("div",{className:"wrb-date-display",children:k})}),e.jsxs("div",{className:"wrb-actions",children:[e.jsx("button",{type:"button",className:"wrb-cancel-btn",onClick:a,children:r.cancelLabel??"Abbrechen"}),e.jsx("button",{type:"submit",className:"wrb-submit-btn",disabled:p==="loading",children:p==="loading"?"Wird gesendet…":r.submitLabel??"Absenden"})]})]})]})]})})}function u({label:r,required:a,hint:n,error:d,children:i}){return e.jsxs("div",{className:"wrb-field",children:[e.jsxs("label",{className:"wrb-label",children:[r,a&&e.jsx("span",{className:"wrb-required","aria-hidden":"true",children:"*"})]}),i,n&&!d&&e.jsx("p",{className:"wrb-hint",children:n}),d&&e.jsx("p",{className:"wrb-field-error",role:"alert",children:d})]})}function C(){const r="wrb-styles";if(document.getElementById(r))return;const a=`
+"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=`
 /* Widerrufsbutton widget — prefix: wrb- */
 .wrb-btn {
   display: inline-flex;
@@ -200,4 +200,128 @@
   font-size: 14px;
 }
 .wrb-alert-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
-`,n=document.createElement("style");n.id=r,n.textContent=a,document.head.appendChild(n)}function A({config:r}){const[a,n]=s.useState(!1);return s.useEffect(()=>{C()},[]),e.jsxs(e.Fragment,{children:[e.jsx("button",{type:"button",className:`wrb-btn${r.buttonClass?` ${r.buttonClass}`:""}`,onClick:()=>n(!0),children:r.buttonLabel??"Vertrag widerrufen"}),a&&I.createPortal(e.jsx(N,{config:r,onClose:()=>n(!1)}),document.body)]})}exports.WiderrufsModal=N;exports.WiderrufsWidget=A;
+
+/* Legal links */
+.wrb-legal-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 16px;
+  margin-top: 16px;
+  padding-top: 12px;
+  border-top: 1px solid #e5e7eb;
+}
+.wrb-legal-link {
+  font-size: 12px;
+  color: #6b7280;
+  text-decoration: none;
+}
+.wrb-legal-link:hover {
+  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?`
+      <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(`
+        `)}
+      </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 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
+            >
+          </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
+            >
+            <p class="wrb-hint">Hierüber erhalten Sie die Eingangsbestätigung.</p>
+          </div>
+          <div class="wrb-field">
+            <label class="wrb-label">
+              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
+            >
+            <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>
+            <p class="wrb-hint">
+              Freiwillige Angabe – ein Widerruf ist ohne Angabe von Gründen möglich.
+            </p>
+          </div>
+          <div class="wrb-field">
+            <label class="wrb-label">Datum der Widerrufserklärung</label>
+            <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)}">`:""}
+          <div class="wrb-actions">
+            <button type="submit" class="wrb-submit-btn">
+              ${u(e.submitLabel??"Absenden")}
+            </button>
+          </div>
+        </form>
+        ${l}
+      </div>
+    </div>
+  </div>
+</body>
+</html>`}exports.WiderrufsModal=W;exports.WiderrufsWidget=O;exports.generateFallbackHtml=D;

package/dist/index.d.ts

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