@netlib/widerrufsbutton 2.1.9 → 2.1.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +26 -26
- package/dist/index.d.ts +1 -0
- package/dist/index.es.js +180 -135
- package/dist/upgrade.d.ts +7 -0
- package/dist/widerrufsbutton.iife.js +9 -9
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),m=require("react"),U=require("react-dom");async function L(e,t){const a={"Content-Type":"application/json"};e.authToken&&(a.Authorization=`Bearer ${e.authToken}`);const o={action:e.action,payload:{...t,...e.companyName?{companyName:e.companyName}:{},...e.senderEmail?{senderEmail:e.senderEmail}:{}}},n=await fetch(e.apiUrl,{method:"PATCH",headers:a,body:JSON.stringify(o)});let c;try{c=await n.json()}catch{if(!n.ok)throw new Error(`Server antwortete mit Status ${n.status}`);return}if(c!==null&&typeof c=="object"&&"ok"in c&&c.ok===!1){const i=c.message;throw new Error(typeof i=="string"&&i?i:`Server antwortete mit Status ${n.status}`)}if(!n.ok)throw new Error(`Server antwortete mit Status ${n.status}`)}const O={firstName:"",lastName:"",email:"",orderNumber:"",reason:""};function $(e){const t={};return e.firstName.trim()||(t.firstName="Bitte geben Sie Ihren Vornamen an."),e.lastName.trim()||(t.lastName="Bitte geben Sie Ihren Nachnamen 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 A({config:e,onClose:t}){const[a,o]=m.useState(O),[n,c]=m.useState({}),[i,x]=m.useState({}),[w,u]=m.useState("idle"),[d,h]=m.useState(""),y=m.useRef(null);m.useEffect(()=>{var p;(p=y.current)==null||p.focus();const s=b=>b.key==="Escape"&&t();return document.addEventListener("keydown",s),()=>document.removeEventListener("keydown",s)},[t]);function f(s,p){const b={...a,[s]:p};if(o(b),i[s]){const N=$(b);c(k=>({...k,[s]:N[s]}))}}function v(s){x(b=>({...b,[s]:!0}));const p=$(a);c(b=>({...b,[s]:p[s]}))}async function F(s){var N,k;s.preventDefault();const p=Object.fromEntries(Object.keys(a).map(j=>[j,!0]));x(p);const b=$(a);if(c(b),!(Object.keys(b).length>0)){u("loading"),h("");try{await L(e,a),u("success"),(N=e.onSuccess)==null||N.call(e)}catch(j){const W=j instanceof Error?j:new Error("Ein unbekannter Fehler ist aufgetreten.");h(W.message),u("error"),(k=e.onError)==null||k.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:s=>s.target===s.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:"✕"})]}),w==="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,{config:e})]}):r.jsxs("div",{className:"wrb-modal-body",children:[e.introText&&r.jsx("p",{className:"wrb-intro",children:e.introText}),w==="error"&&d&&r.jsx("div",{className:"wrb-alert wrb-alert-error",role:"alert",children:d}),r.jsxs("form",{onSubmit:F,noValidate:!0,children:[r.jsx(g,{label:"Vorname",required:!0,error:i.firstName?n.firstName:void 0,children:r.jsx("input",{ref:y,className:`wrb-input${i.firstName&&n.firstName?" wrb-error":""}`,type:"text",autoComplete:"given-name",value:a.firstName,onChange:s=>f("firstName",s.target.value),onBlur:()=>v("firstName"),placeholder:"Max"})}),r.jsx(g,{label:"Nachname",required:!0,error:i.lastName?n.lastName:void 0,children:r.jsx("input",{className:`wrb-input${i.lastName&&n.lastName?" wrb-error":""}`,type:"text",autoComplete:"family-name",value:a.lastName,onChange:s=>f("lastName",s.target.value),onBlur:()=>v("lastName"),placeholder:"Mustermann"})}),r.jsx(g,{label:"E-Mail-Adresse",required:!0,hint:"Hierüber erhalten Sie die Eingangsbestätigung.",error:i.email?n.email:void 0,children:r.jsx("input",{className:`wrb-input${i.email&&n.email?" wrb-error":""}`,type:"email",autoComplete:"email",value:a.email,onChange:s=>f("email",s.target.value),onBlur:()=>v("email"),placeholder:"name@beispiel.de"})}),r.jsx(g,{label:"Bestell- / Auftrags- / Vertragsnummer",required:!0,hint:"Zu finden in Ihrer Bestellbestätigung.",error:i.orderNumber?n.orderNumber:void 0,children:r.jsx("input",{className:`wrb-input${i.orderNumber&&n.orderNumber?" wrb-error":""}`,type:"text",value:a.orderNumber,onChange:s=>f("orderNumber",s.target.value),onBlur:()=>v("orderNumber"),placeholder:"z.B. 10045678"})}),r.jsx(g,{label:"Widerrufsgrund",hint:"Freiwillige Angabe – ein Widerruf ist ohne Angabe von Gründen möglich.",children:r.jsx("textarea",{className:"wrb-textarea",value:a.reason,onChange:s=>f("reason",s.target.value),placeholder:"Optional",rows:2})}),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:w==="loading",children:w==="loading"?"Wird gesendet…":e.submitLabel??"Absenden"})]})]}),r.jsx(z,{config:e})]})]})})}function g({label:e,required:t,hint:a,error:o,children:n}){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:"*"})]}),n,a&&!o&&r.jsx("p",{className:"wrb-hint",children:a}),o&&r.jsx("p",{className:"wrb-field-error",role:"alert",children:o})]})}function z({config:e}){return e.privacyUrl?r.jsx("div",{className:"wrb-legal-links",children:r.jsx("a",{href:e.privacyUrl,className:"wrb-legal-link",target:"_blank",rel:"noopener noreferrer",children:e.privacyLabel??"Datenschutz"})}):null}const E=`
|
|
2
2
|
/* Widerrufsbutton widget — prefix: wrb- */
|
|
3
3
|
.wrb-btn {
|
|
4
4
|
display: inline-flex;
|
|
@@ -227,10 +227,10 @@
|
|
|
227
227
|
color: #374151;
|
|
228
228
|
text-decoration: underline;
|
|
229
229
|
}
|
|
230
|
-
`;function
|
|
230
|
+
`;function I(){const e="wrb-styles";if(document.getElementById(e))return;const t=document.createElement("style");t.id=e,t.textContent=E,document.head.appendChild(t)}function C(e){e.dataset.wrbUpgraded||(e.dataset.wrbUpgraded="true",e.addEventListener("submit",async t=>{t.preventDefault();const a=e.querySelector('.wrb-submit-btn, button[type="submit"]'),o=(a==null?void 0:a.textContent)??"";a&&(a.disabled=!0,a.textContent="Wird gesendet…");const n=new FormData(e),c=String(n.get("action")??""),i={firstName:String(n.get("firstName")??""),lastName:String(n.get("lastName")??""),email:String(n.get("email")??""),orderNumber:String(n.get("orderNumber")??""),reason:String(n.get("reason")??"")};e.dataset.companyName&&(i.companyName=e.dataset.companyName),e.dataset.senderEmail&&(i.senderEmail=e.dataset.senderEmail);const x={"Content-Type":"application/json"};e.dataset.authToken&&(x.Authorization=`Bearer ${e.dataset.authToken}`);const w=e.getAttribute("action")??"";try{const u=await fetch(w,{method:"PATCH",headers:x,body:JSON.stringify({action:c,payload:i})});let d=null;try{d=await u.json()}catch{}if(!(d&&typeof d=="object"&&"ok"in d?d.ok!==!1:u.ok)){const y=d&&typeof d=="object"&&"message"in d?String(d.message??""):"";throw new Error(y||`Server antwortete mit Status ${u.status}`)}e.reset(),location.hash="#wrb-success"}catch(u){const d=u instanceof Error?u:new Error("Unbekannter Fehler"),h=document.querySelector("#wrb-error .wrb-alert");h&&(h.textContent=d.message),location.hash="#wrb-error"}finally{a&&(a.disabled=!1,a.textContent=o)}}))}function T(){typeof document>"u"||document.querySelectorAll("#wrb-modal form").forEach(C)}function P({config:e}){const[t,a]=m.useState(!1);return m.useEffect(()=>{I(),T()},[]),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&&U.createPortal(r.jsx(A,{config:e,onClose:()=>a(!1)}),document.body)]})}function l(e){return e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""")}function S(e){if(!e.privacyUrl)return"";const t=l(e.privacyLabel??"Datenschutz");return`
|
|
231
231
|
<div class="wrb-legal-links">
|
|
232
|
-
<a href="${
|
|
233
|
-
</div>`}function B(e){const
|
|
232
|
+
<a href="${l(e.privacyUrl)}" class="wrb-legal-link" rel="noopener noreferrer">${t}</a>
|
|
233
|
+
</div>`}function B(e){const t=[];return e.companyName&&t.push(`data-company-name="${l(e.companyName)}"`),e.senderEmail&&t.push(`data-sender-email="${l(e.senderEmail)}"`),e.authToken&&t.push(`data-auth-token="${l(e.authToken)}"`),t.length?" "+t.join(" "):""}function q(e,t="",a=""){const o=l(e.successUrl??t),n=l(e.errorUrl??a);return`
|
|
234
234
|
<div class="wrb-field">
|
|
235
235
|
<label class="wrb-label">
|
|
236
236
|
Vorname <span class="wrb-required" aria-hidden="true">*</span>
|
|
@@ -269,14 +269,14 @@
|
|
|
269
269
|
Freiwillige Angabe – ein Widerruf ist ohne Angabe von Gründen möglich.
|
|
270
270
|
</p>
|
|
271
271
|
</div>
|
|
272
|
-
<input type="hidden" name="action" value="${
|
|
272
|
+
<input type="hidden" name="action" value="${l(e.action)}">
|
|
273
273
|
${o?`<input type="hidden" name="successUrl" value="${o}">`:""}
|
|
274
|
-
${n?`<input type="hidden" name="errorUrl" value="${n}">`:""}`}function
|
|
274
|
+
${n?`<input type="hidden" name="errorUrl" value="${n}">`:""}`}function D(e){const t=e.companyName?`Widerruf – ${l(e.companyName)}`:"Widerrufsformular",a=l(e.formAction??e.apiUrl??"/rest/v1/apiCancellation");return`<!DOCTYPE html>
|
|
275
275
|
<html lang="de">
|
|
276
276
|
<head>
|
|
277
277
|
<meta charset="UTF-8">
|
|
278
278
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
279
|
-
<title>${
|
|
279
|
+
<title>${t}</title>
|
|
280
280
|
<style>
|
|
281
281
|
*, *::before, *::after { box-sizing: border-box; }
|
|
282
282
|
body { margin: 0; background: #f9fafb; }
|
|
@@ -289,54 +289,54 @@
|
|
|
289
289
|
}
|
|
290
290
|
.wrb-page .wrb-modal { max-height: none; }
|
|
291
291
|
.wrb-page .wrb-modal-title { font-size: 20px; }
|
|
292
|
-
${
|
|
292
|
+
${E}
|
|
293
293
|
</style>
|
|
294
294
|
</head>
|
|
295
295
|
<body>
|
|
296
296
|
<div class="wrb-page">
|
|
297
297
|
<div class="wrb-modal">
|
|
298
298
|
<div class="wrb-modal-header">
|
|
299
|
-
<h1 class="wrb-modal-title">${
|
|
299
|
+
<h1 class="wrb-modal-title">${t}</h1>
|
|
300
300
|
</div>
|
|
301
301
|
<div class="wrb-modal-body">
|
|
302
|
-
${e.introText?`<p class="wrb-intro">${
|
|
303
|
-
<form method="POST" action="${
|
|
304
|
-
${
|
|
302
|
+
${e.introText?`<p class="wrb-intro">${l(e.introText)}</p>`:""}
|
|
303
|
+
<form method="POST" action="${a}"${B(e)}>
|
|
304
|
+
${q(e)}
|
|
305
305
|
<div class="wrb-actions">
|
|
306
306
|
<button type="submit" class="wrb-submit-btn">
|
|
307
|
-
${
|
|
307
|
+
${l(e.submitLabel??"Absenden")}
|
|
308
308
|
</button>
|
|
309
309
|
</div>
|
|
310
310
|
</form>
|
|
311
|
-
${
|
|
311
|
+
${S(e)}
|
|
312
312
|
</div>
|
|
313
313
|
</div>
|
|
314
314
|
</div>
|
|
315
315
|
</body>
|
|
316
|
-
</html>`}function
|
|
316
|
+
</html>`}function H(e,{inlineStyles:t=!0}={}){const a=e.companyName?`Widerruf – ${l(e.companyName)}`:"Widerrufsformular",o=l(e.formAction??e.apiUrl??"/rest/v1/apiCancellation"),n=`
|
|
317
317
|
#wrb-modal, #wrb-success, #wrb-error { display: none; }
|
|
318
|
-
#wrb-modal:target, #wrb-success:target, #wrb-error:target { display: flex; }`;return`${
|
|
319
|
-
${
|
|
318
|
+
#wrb-modal:target, #wrb-success:target, #wrb-error:target { display: flex; }`;return`${t?`<style>${n}
|
|
319
|
+
${E}</style>`:`<style>${n}</style>`}
|
|
320
320
|
|
|
321
321
|
<!-- Widerruf: Form-Modal -->
|
|
322
322
|
<div id="wrb-modal" class="wrb-overlay" role="dialog" aria-modal="true" aria-labelledby="wrb-modal-title">
|
|
323
323
|
<div class="wrb-modal">
|
|
324
324
|
<div class="wrb-modal-header">
|
|
325
|
-
<h2 class="wrb-modal-title" id="wrb-modal-title">${
|
|
325
|
+
<h2 class="wrb-modal-title" id="wrb-modal-title">${a}</h2>
|
|
326
326
|
<a href="#" class="wrb-close-btn" aria-label="Schließen">✕</a>
|
|
327
327
|
</div>
|
|
328
328
|
<div class="wrb-modal-body">
|
|
329
|
-
${e.introText?`<p class="wrb-intro">${
|
|
329
|
+
${e.introText?`<p class="wrb-intro">${l(e.introText)}</p>`:""}
|
|
330
330
|
<form method="POST" action="${o}"${B(e)}>
|
|
331
|
-
${
|
|
331
|
+
${q(e,"#wrb-success","#wrb-error")}
|
|
332
332
|
<div class="wrb-actions">
|
|
333
|
-
<a href="#" class="wrb-cancel-btn">${
|
|
333
|
+
<a href="#" class="wrb-cancel-btn">${l(e.cancelLabel??"Abbrechen")}</a>
|
|
334
334
|
<button type="submit" class="wrb-submit-btn">
|
|
335
|
-
${
|
|
335
|
+
${l(e.submitLabel??"Absenden")}
|
|
336
336
|
</button>
|
|
337
337
|
</div>
|
|
338
338
|
</form>
|
|
339
|
-
${
|
|
339
|
+
${S(e)}
|
|
340
340
|
</div>
|
|
341
341
|
</div>
|
|
342
342
|
</div>
|
|
@@ -357,7 +357,7 @@ ${k}</style>`:`<style>${n}</style>`}
|
|
|
357
357
|
Bestätigung per E-Mail.
|
|
358
358
|
</p>
|
|
359
359
|
</div>
|
|
360
|
-
${
|
|
360
|
+
${S(e)}
|
|
361
361
|
</div>
|
|
362
362
|
</div>
|
|
363
363
|
</div>
|
|
@@ -378,7 +378,7 @@ ${k}</style>`:`<style>${n}</style>`}
|
|
|
378
378
|
<a href="#" class="wrb-cancel-btn">Schließen</a>
|
|
379
379
|
<a href="#wrb-modal" class="wrb-submit-btn">Erneut versuchen</a>
|
|
380
380
|
</div>
|
|
381
|
-
${
|
|
381
|
+
${S(e)}
|
|
382
382
|
</div>
|
|
383
383
|
</div>
|
|
384
|
-
</div>`}exports.WiderrufsModal=A;exports.WiderrufsWidget=
|
|
384
|
+
</div>`}exports.WiderrufsModal=A;exports.WiderrufsWidget=P;exports.generateFallbackHtml=D;exports.generateModalHtml=H;exports.upgradeAllStaticForms=T;exports.upgradeStaticForm=C;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { WiderrufsWidget } from './components/WiderrufsWidget';
|
|
2
2
|
export { WiderrufsModal } from './components/WiderrufsModal';
|
|
3
3
|
export { generateFallbackHtml, generateModalHtml } from './fallback';
|
|
4
|
+
export { upgradeAllStaticForms, upgradeStaticForm } from './upgrade';
|
|
4
5
|
export type { WiderrufsConfig, WiderrufsFormData, SubmitStatus } from './types';
|