@netlib/widerrufsbutton 2.1.9 → 2.1.13
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/fallback.cjs.js +22 -7
- package/dist/fallback.es.js +33 -18
- package/dist/index.cjs.js +46 -31
- package/dist/index.d.ts +1 -0
- package/dist/index.es.js +222 -141
- package/dist/styles.d.ts +1 -1
- package/dist/upgrade.d.ts +7 -0
- package/dist/widerruf.html +19 -4
- package/dist/widerrufsbutton.iife.js +25 -13
- package/package.json +1 -1
package/dist/fallback.cjs.js
CHANGED
|
@@ -227,6 +227,18 @@
|
|
|
227
227
|
color: #374151;
|
|
228
228
|
text-decoration: underline;
|
|
229
229
|
}
|
|
230
|
+
|
|
231
|
+
/* Honeypot — off-screen, never visible, not tabbable */
|
|
232
|
+
.wrb-hp {
|
|
233
|
+
position: absolute !important;
|
|
234
|
+
left: -10000px !important;
|
|
235
|
+
top: auto !important;
|
|
236
|
+
width: 1px !important;
|
|
237
|
+
height: 1px !important;
|
|
238
|
+
overflow: hidden !important;
|
|
239
|
+
opacity: 0 !important;
|
|
240
|
+
pointer-events: none !important;
|
|
241
|
+
}
|
|
230
242
|
`;function r(e){return e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""")}function n(e){if(!e.privacyUrl)return"";const a=r(e.privacyLabel??"Datenschutz");return`
|
|
231
243
|
<div class="wrb-legal-links">
|
|
232
244
|
<a href="${r(e.privacyUrl)}" class="wrb-legal-link" rel="noopener noreferrer">${a}</a>
|
|
@@ -251,16 +263,15 @@
|
|
|
251
263
|
</label>
|
|
252
264
|
<input class="wrb-input" type="email" name="email" autocomplete="email"
|
|
253
265
|
placeholder="name@beispiel.de" required>
|
|
254
|
-
<p class="wrb-hint"
|
|
266
|
+
<p class="wrb-hint"An diese Adresse senden wir Ihnen die Eingangsbestätigung.</p>
|
|
255
267
|
</div>
|
|
256
268
|
<div class="wrb-field">
|
|
257
269
|
<label class="wrb-label">
|
|
258
|
-
|
|
270
|
+
Rechnungs- / Lieferschein- / Auftragsnummer
|
|
259
271
|
<span class="wrb-required" aria-hidden="true">*</span>
|
|
260
272
|
</label>
|
|
261
273
|
<input class="wrb-input" type="text" name="orderNumber"
|
|
262
|
-
placeholder="z.B.
|
|
263
|
-
<p class="wrb-hint">Zu finden in Ihrer Bestellbestätigung.</p>
|
|
274
|
+
placeholder="z.B. RE123456" required>
|
|
264
275
|
</div>
|
|
265
276
|
<div class="wrb-field">
|
|
266
277
|
<label class="wrb-label">Widerrufsgrund</label>
|
|
@@ -271,7 +282,11 @@
|
|
|
271
282
|
</div>
|
|
272
283
|
<input type="hidden" name="action" value="${r(e.action)}">
|
|
273
284
|
${l?`<input type="hidden" name="successUrl" value="${l}">`:""}
|
|
274
|
-
${i?`<input type="hidden" name="errorUrl" value="${i}">`:""}
|
|
285
|
+
${i?`<input type="hidden" name="errorUrl" value="${i}">`:""}
|
|
286
|
+
<div class="wrb-hp" aria-hidden="true">
|
|
287
|
+
<label>Website (leer lassen)</label>
|
|
288
|
+
<input type="text" name="wrbWebsite" tabindex="-1" autocomplete="off" value="">
|
|
289
|
+
</div>`}function b(e){const a=e.companyName?`Widerruf – ${r(e.companyName)}`:"Widerrufsformular",t=r(e.formAction??e.apiUrl??"/rest/v1/apiCancellation");return`<!DOCTYPE html>
|
|
275
290
|
<html lang="de">
|
|
276
291
|
<head>
|
|
277
292
|
<meta charset="UTF-8">
|
|
@@ -313,7 +328,7 @@
|
|
|
313
328
|
</div>
|
|
314
329
|
</div>
|
|
315
330
|
</body>
|
|
316
|
-
</html>`}function
|
|
331
|
+
</html>`}function p(e,{inlineStyles:a=!0}={}){const t=e.companyName?`Widerruf – ${r(e.companyName)}`:"Widerrufsformular",l=r(e.formAction??e.apiUrl??"/rest/v1/apiCancellation"),i=`
|
|
317
332
|
#wrb-modal, #wrb-success, #wrb-error { display: none; }
|
|
318
333
|
#wrb-modal:target, #wrb-success:target, #wrb-error:target { display: flex; }`;return`${a?`<style>${i}
|
|
319
334
|
${o}</style>`:`<style>${i}</style>`}
|
|
@@ -381,4 +396,4 @@ ${o}</style>`:`<style>${i}</style>`}
|
|
|
381
396
|
${n(e)}
|
|
382
397
|
</div>
|
|
383
398
|
</div>
|
|
384
|
-
</div>`}exports.generateFallbackHtml=b;exports.generateModalHtml=
|
|
399
|
+
</div>`}exports.generateFallbackHtml=b;exports.generateModalHtml=p;
|
package/dist/fallback.es.js
CHANGED
|
@@ -227,11 +227,23 @@ const o = `
|
|
|
227
227
|
color: #374151;
|
|
228
228
|
text-decoration: underline;
|
|
229
229
|
}
|
|
230
|
+
|
|
231
|
+
/* Honeypot — off-screen, never visible, not tabbable */
|
|
232
|
+
.wrb-hp {
|
|
233
|
+
position: absolute !important;
|
|
234
|
+
left: -10000px !important;
|
|
235
|
+
top: auto !important;
|
|
236
|
+
width: 1px !important;
|
|
237
|
+
height: 1px !important;
|
|
238
|
+
overflow: hidden !important;
|
|
239
|
+
opacity: 0 !important;
|
|
240
|
+
pointer-events: none !important;
|
|
241
|
+
}
|
|
230
242
|
`;
|
|
231
243
|
function r(e) {
|
|
232
244
|
return e.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """);
|
|
233
245
|
}
|
|
234
|
-
function
|
|
246
|
+
function l(e) {
|
|
235
247
|
if (!e.privacyUrl) return "";
|
|
236
248
|
const a = r(e.privacyLabel ?? "Datenschutz");
|
|
237
249
|
return `
|
|
@@ -244,7 +256,7 @@ function s(e) {
|
|
|
244
256
|
return e.companyName && a.push(`data-company-name="${r(e.companyName)}"`), e.senderEmail && a.push(`data-sender-email="${r(e.senderEmail)}"`), e.authToken && a.push(`data-auth-token="${r(e.authToken)}"`), a.length ? " " + a.join(" ") : "";
|
|
245
257
|
}
|
|
246
258
|
function d(e, a = "", t = "") {
|
|
247
|
-
const
|
|
259
|
+
const n = r(e.successUrl ?? a), i = r(e.errorUrl ?? t);
|
|
248
260
|
return `
|
|
249
261
|
<div class="wrb-field">
|
|
250
262
|
<label class="wrb-label">
|
|
@@ -266,16 +278,15 @@ function d(e, a = "", t = "") {
|
|
|
266
278
|
</label>
|
|
267
279
|
<input class="wrb-input" type="email" name="email" autocomplete="email"
|
|
268
280
|
placeholder="name@beispiel.de" required>
|
|
269
|
-
<p class="wrb-hint"
|
|
281
|
+
<p class="wrb-hint"An diese Adresse senden wir Ihnen die Eingangsbestätigung.</p>
|
|
270
282
|
</div>
|
|
271
283
|
<div class="wrb-field">
|
|
272
284
|
<label class="wrb-label">
|
|
273
|
-
|
|
285
|
+
Rechnungs- / Lieferschein- / Auftragsnummer
|
|
274
286
|
<span class="wrb-required" aria-hidden="true">*</span>
|
|
275
287
|
</label>
|
|
276
288
|
<input class="wrb-input" type="text" name="orderNumber"
|
|
277
|
-
placeholder="z.B.
|
|
278
|
-
<p class="wrb-hint">Zu finden in Ihrer Bestellbestätigung.</p>
|
|
289
|
+
placeholder="z.B. RE123456" required>
|
|
279
290
|
</div>
|
|
280
291
|
<div class="wrb-field">
|
|
281
292
|
<label class="wrb-label">Widerrufsgrund</label>
|
|
@@ -285,10 +296,14 @@ function d(e, a = "", t = "") {
|
|
|
285
296
|
</p>
|
|
286
297
|
</div>
|
|
287
298
|
<input type="hidden" name="action" value="${r(e.action)}">
|
|
288
|
-
${
|
|
289
|
-
${i ? `<input type="hidden" name="errorUrl" value="${i}">` : ""}
|
|
299
|
+
${n ? `<input type="hidden" name="successUrl" value="${n}">` : ""}
|
|
300
|
+
${i ? `<input type="hidden" name="errorUrl" value="${i}">` : ""}
|
|
301
|
+
<div class="wrb-hp" aria-hidden="true">
|
|
302
|
+
<label>Website (leer lassen)</label>
|
|
303
|
+
<input type="text" name="wrbWebsite" tabindex="-1" autocomplete="off" value="">
|
|
304
|
+
</div>`;
|
|
290
305
|
}
|
|
291
|
-
function
|
|
306
|
+
function p(e) {
|
|
292
307
|
const a = e.companyName ? `Widerruf – ${r(e.companyName)}` : "Widerrufsformular", t = r(e.formAction ?? e.apiUrl ?? "/rest/v1/apiCancellation");
|
|
293
308
|
return `<!DOCTYPE html>
|
|
294
309
|
<html lang="de">
|
|
@@ -327,15 +342,15 @@ function c(e) {
|
|
|
327
342
|
</button>
|
|
328
343
|
</div>
|
|
329
344
|
</form>
|
|
330
|
-
${
|
|
345
|
+
${l(e)}
|
|
331
346
|
</div>
|
|
332
347
|
</div>
|
|
333
348
|
</div>
|
|
334
349
|
</body>
|
|
335
350
|
</html>`;
|
|
336
351
|
}
|
|
337
|
-
function
|
|
338
|
-
const t = e.companyName ? `Widerruf – ${r(e.companyName)}` : "Widerrufsformular",
|
|
352
|
+
function c(e, { inlineStyles: a = !0 } = {}) {
|
|
353
|
+
const t = e.companyName ? `Widerruf – ${r(e.companyName)}` : "Widerrufsformular", n = r(e.formAction ?? e.apiUrl ?? "/rest/v1/apiCancellation"), i = `
|
|
339
354
|
#wrb-modal, #wrb-success, #wrb-error { display: none; }
|
|
340
355
|
#wrb-modal:target, #wrb-success:target, #wrb-error:target { display: flex; }`;
|
|
341
356
|
return `${a ? `<style>${i}
|
|
@@ -350,7 +365,7 @@ ${o}</style>` : `<style>${i}</style>`}
|
|
|
350
365
|
</div>
|
|
351
366
|
<div class="wrb-modal-body">
|
|
352
367
|
${e.introText ? `<p class="wrb-intro">${r(e.introText)}</p>` : ""}
|
|
353
|
-
<form method="POST" action="${
|
|
368
|
+
<form method="POST" action="${n}"${s(e)}>
|
|
354
369
|
${d(e, "#wrb-success", "#wrb-error")}
|
|
355
370
|
<div class="wrb-actions">
|
|
356
371
|
<a href="#" class="wrb-cancel-btn">${r(e.cancelLabel ?? "Abbrechen")}</a>
|
|
@@ -359,7 +374,7 @@ ${o}</style>` : `<style>${i}</style>`}
|
|
|
359
374
|
</button>
|
|
360
375
|
</div>
|
|
361
376
|
</form>
|
|
362
|
-
${
|
|
377
|
+
${l(e)}
|
|
363
378
|
</div>
|
|
364
379
|
</div>
|
|
365
380
|
</div>
|
|
@@ -380,7 +395,7 @@ ${o}</style>` : `<style>${i}</style>`}
|
|
|
380
395
|
Bestätigung per E-Mail.
|
|
381
396
|
</p>
|
|
382
397
|
</div>
|
|
383
|
-
${
|
|
398
|
+
${l(e)}
|
|
384
399
|
</div>
|
|
385
400
|
</div>
|
|
386
401
|
</div>
|
|
@@ -401,12 +416,12 @@ ${o}</style>` : `<style>${i}</style>`}
|
|
|
401
416
|
<a href="#" class="wrb-cancel-btn">Schließen</a>
|
|
402
417
|
<a href="#wrb-modal" class="wrb-submit-btn">Erneut versuchen</a>
|
|
403
418
|
</div>
|
|
404
|
-
${
|
|
419
|
+
${l(e)}
|
|
405
420
|
</div>
|
|
406
421
|
</div>
|
|
407
422
|
</div>`;
|
|
408
423
|
}
|
|
409
424
|
export {
|
|
410
|
-
|
|
411
|
-
|
|
425
|
+
p as generateFallbackHtml,
|
|
426
|
+
c as generateModalHtml
|
|
412
427
|
};
|
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"),O=require("react-dom");async function R(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 I={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 Rechnungs-, Lieferschein- oder Auftragsnummer an."),t}function T({config:e,onClose:t}){const[a,o]=m.useState(I),[n,c]=m.useState({}),[i,f]=m.useState({}),[h,b]=m.useState("idle"),[d,w]=m.useState(""),y=m.useRef(null),W=m.useRef(null);m.useEffect(()=>{var p;(p=y.current)==null||p.focus();const s=u=>u.key==="Escape"&&t();return document.addEventListener("keydown",s),()=>document.removeEventListener("keydown",s)},[t]);function x(s,p){const u={...a,[s]:p};if(o(u),i[s]){const N=$(u);c(k=>({...k,[s]:N[s]}))}}function v(s){f(u=>({...u,[s]:!0}));const p=$(a);c(u=>({...u,[s]:p[s]}))}async function L(s){var N,k,A;if(s.preventDefault(),(((N=W.current)==null?void 0:N.value)??"").trim()!==""){b("success");return}const p=Object.fromEntries(Object.keys(a).map(j=>[j,!0]));f(p);const u=$(a);if(c(u),!(Object.keys(u).length>0)){b("loading"),w("");try{await R(e,a),b("success"),(k=e.onSuccess)==null||k.call(e)}catch(j){const z=j instanceof Error?j:new Error("Ein unbekannter Fehler ist aufgetreten.");w(z.message),b("error"),(A=e.onError)==null||A.call(e,z)}}}const U=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:U}),r.jsx("button",{className:"wrb-close-btn",onClick:t,"aria-label":"Schließen",type:"button",children:"✕"})]}),h==="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(C,{config:e})]}):r.jsxs("div",{className:"wrb-modal-body",children:[e.introText&&r.jsx("p",{className:"wrb-intro",children:e.introText}),h==="error"&&d&&r.jsx("div",{className:"wrb-alert wrb-alert-error",role:"alert",children:d}),r.jsxs("form",{onSubmit:L,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=>x("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=>x("lastName",s.target.value),onBlur:()=>v("lastName"),placeholder:"Mustermann"})}),r.jsx(g,{label:"E-Mail-Adresse",required:!0,hint:"An diese Adresse senden wir Ihnen 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=>x("email",s.target.value),onBlur:()=>v("email"),placeholder:"name@beispiel.de"})}),r.jsx(g,{label:"Rechnungs- / Lieferschein- / Auftragsnummer",required:!0,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=>x("orderNumber",s.target.value),onBlur:()=>v("orderNumber"),placeholder:"z.B. RE123456"})}),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=>x("reason",s.target.value),placeholder:"Optional",rows:2})}),r.jsxs("div",{className:"wrb-hp","aria-hidden":"true",children:[r.jsx("label",{children:"Website (leer lassen)"}),r.jsx("input",{ref:W,type:"text",name:"wrbWebsite",tabIndex:-1,autoComplete:"off",defaultValue:""})]}),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:h==="loading",children:h==="loading"?"Wird gesendet…":e.submitLabel??"Absenden"})]})]}),r.jsx(C,{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 C({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,22 @@
|
|
|
227
227
|
color: #374151;
|
|
228
228
|
text-decoration: underline;
|
|
229
229
|
}
|
|
230
|
-
|
|
230
|
+
|
|
231
|
+
/* Honeypot — off-screen, never visible, not tabbable */
|
|
232
|
+
.wrb-hp {
|
|
233
|
+
position: absolute !important;
|
|
234
|
+
left: -10000px !important;
|
|
235
|
+
top: auto !important;
|
|
236
|
+
width: 1px !important;
|
|
237
|
+
height: 1px !important;
|
|
238
|
+
overflow: hidden !important;
|
|
239
|
+
opacity: 0 !important;
|
|
240
|
+
pointer-events: none !important;
|
|
241
|
+
}
|
|
242
|
+
`;function P(){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 q(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);if(String(n.get("wrbWebsite")??"").trim()!==""){e.reset(),location.hash="#wrb-success",a&&(a.disabled=!1,a.textContent=o);return}const 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 f={"Content-Type":"application/json"};e.dataset.authToken&&(f.Authorization=`Bearer ${e.dataset.authToken}`);const h=e.getAttribute("action")??"";try{const b=await fetch(h,{method:"PATCH",headers:f,body:JSON.stringify({action:c,payload:i})});let d=null;try{d=await b.json()}catch{}if(!(d&&typeof d=="object"&&"ok"in d?d.ok!==!1:b.ok)){const y=d&&typeof d=="object"&&"message"in d?String(d.message??""):"";throw new Error(y||`Server antwortete mit Status ${b.status}`)}e.reset(),location.hash="#wrb-success"}catch(b){const d=b instanceof Error?b:new Error("Unbekannter Fehler"),w=document.querySelector("#wrb-error .wrb-alert");w&&(w.textContent=d.message),location.hash="#wrb-error"}finally{a&&(a.disabled=!1,a.textContent=o)}}))}function F(){typeof document>"u"||document.querySelectorAll("#wrb-modal form").forEach(q)}function D({config:e}){const[t,a]=m.useState(!1);return m.useEffect(()=>{P(),F()},[]),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&&O.createPortal(r.jsx(T,{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
243
|
<div class="wrb-legal-links">
|
|
232
|
-
<a href="${
|
|
233
|
-
</div>`}function
|
|
244
|
+
<a href="${l(e.privacyUrl)}" class="wrb-legal-link" rel="noopener noreferrer">${t}</a>
|
|
245
|
+
</div>`}function M(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 B(e,t="",a=""){const o=l(e.successUrl??t),n=l(e.errorUrl??a);return`
|
|
234
246
|
<div class="wrb-field">
|
|
235
247
|
<label class="wrb-label">
|
|
236
248
|
Vorname <span class="wrb-required" aria-hidden="true">*</span>
|
|
@@ -251,16 +263,15 @@
|
|
|
251
263
|
</label>
|
|
252
264
|
<input class="wrb-input" type="email" name="email" autocomplete="email"
|
|
253
265
|
placeholder="name@beispiel.de" required>
|
|
254
|
-
<p class="wrb-hint"
|
|
266
|
+
<p class="wrb-hint"An diese Adresse senden wir Ihnen die Eingangsbestätigung.</p>
|
|
255
267
|
</div>
|
|
256
268
|
<div class="wrb-field">
|
|
257
269
|
<label class="wrb-label">
|
|
258
|
-
|
|
270
|
+
Rechnungs- / Lieferschein- / Auftragsnummer
|
|
259
271
|
<span class="wrb-required" aria-hidden="true">*</span>
|
|
260
272
|
</label>
|
|
261
273
|
<input class="wrb-input" type="text" name="orderNumber"
|
|
262
|
-
placeholder="z.B.
|
|
263
|
-
<p class="wrb-hint">Zu finden in Ihrer Bestellbestätigung.</p>
|
|
274
|
+
placeholder="z.B. RE123456" required>
|
|
264
275
|
</div>
|
|
265
276
|
<div class="wrb-field">
|
|
266
277
|
<label class="wrb-label">Widerrufsgrund</label>
|
|
@@ -269,14 +280,18 @@
|
|
|
269
280
|
Freiwillige Angabe – ein Widerruf ist ohne Angabe von Gründen möglich.
|
|
270
281
|
</p>
|
|
271
282
|
</div>
|
|
272
|
-
<input type="hidden" name="action" value="${
|
|
283
|
+
<input type="hidden" name="action" value="${l(e.action)}">
|
|
273
284
|
${o?`<input type="hidden" name="successUrl" value="${o}">`:""}
|
|
274
|
-
${n?`<input type="hidden" name="errorUrl" value="${n}">`:""}
|
|
285
|
+
${n?`<input type="hidden" name="errorUrl" value="${n}">`:""}
|
|
286
|
+
<div class="wrb-hp" aria-hidden="true">
|
|
287
|
+
<label>Website (leer lassen)</label>
|
|
288
|
+
<input type="text" name="wrbWebsite" tabindex="-1" autocomplete="off" value="">
|
|
289
|
+
</div>`}function H(e){const t=e.companyName?`Widerruf – ${l(e.companyName)}`:"Widerrufsformular",a=l(e.formAction??e.apiUrl??"/rest/v1/apiCancellation");return`<!DOCTYPE html>
|
|
275
290
|
<html lang="de">
|
|
276
291
|
<head>
|
|
277
292
|
<meta charset="UTF-8">
|
|
278
293
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
279
|
-
<title>${
|
|
294
|
+
<title>${t}</title>
|
|
280
295
|
<style>
|
|
281
296
|
*, *::before, *::after { box-sizing: border-box; }
|
|
282
297
|
body { margin: 0; background: #f9fafb; }
|
|
@@ -289,54 +304,54 @@
|
|
|
289
304
|
}
|
|
290
305
|
.wrb-page .wrb-modal { max-height: none; }
|
|
291
306
|
.wrb-page .wrb-modal-title { font-size: 20px; }
|
|
292
|
-
${
|
|
307
|
+
${E}
|
|
293
308
|
</style>
|
|
294
309
|
</head>
|
|
295
310
|
<body>
|
|
296
311
|
<div class="wrb-page">
|
|
297
312
|
<div class="wrb-modal">
|
|
298
313
|
<div class="wrb-modal-header">
|
|
299
|
-
<h1 class="wrb-modal-title">${
|
|
314
|
+
<h1 class="wrb-modal-title">${t}</h1>
|
|
300
315
|
</div>
|
|
301
316
|
<div class="wrb-modal-body">
|
|
302
|
-
${e.introText?`<p class="wrb-intro">${
|
|
303
|
-
<form method="POST" action="${
|
|
304
|
-
${
|
|
317
|
+
${e.introText?`<p class="wrb-intro">${l(e.introText)}</p>`:""}
|
|
318
|
+
<form method="POST" action="${a}"${M(e)}>
|
|
319
|
+
${B(e)}
|
|
305
320
|
<div class="wrb-actions">
|
|
306
321
|
<button type="submit" class="wrb-submit-btn">
|
|
307
|
-
${
|
|
322
|
+
${l(e.submitLabel??"Absenden")}
|
|
308
323
|
</button>
|
|
309
324
|
</div>
|
|
310
325
|
</form>
|
|
311
|
-
${
|
|
326
|
+
${S(e)}
|
|
312
327
|
</div>
|
|
313
328
|
</div>
|
|
314
329
|
</div>
|
|
315
330
|
</body>
|
|
316
|
-
</html>`}function
|
|
331
|
+
</html>`}function V(e,{inlineStyles:t=!0}={}){const a=e.companyName?`Widerruf – ${l(e.companyName)}`:"Widerrufsformular",o=l(e.formAction??e.apiUrl??"/rest/v1/apiCancellation"),n=`
|
|
317
332
|
#wrb-modal, #wrb-success, #wrb-error { display: none; }
|
|
318
|
-
#wrb-modal:target, #wrb-success:target, #wrb-error:target { display: flex; }`;return`${
|
|
319
|
-
${
|
|
333
|
+
#wrb-modal:target, #wrb-success:target, #wrb-error:target { display: flex; }`;return`${t?`<style>${n}
|
|
334
|
+
${E}</style>`:`<style>${n}</style>`}
|
|
320
335
|
|
|
321
336
|
<!-- Widerruf: Form-Modal -->
|
|
322
337
|
<div id="wrb-modal" class="wrb-overlay" role="dialog" aria-modal="true" aria-labelledby="wrb-modal-title">
|
|
323
338
|
<div class="wrb-modal">
|
|
324
339
|
<div class="wrb-modal-header">
|
|
325
|
-
<h2 class="wrb-modal-title" id="wrb-modal-title">${
|
|
340
|
+
<h2 class="wrb-modal-title" id="wrb-modal-title">${a}</h2>
|
|
326
341
|
<a href="#" class="wrb-close-btn" aria-label="Schließen">✕</a>
|
|
327
342
|
</div>
|
|
328
343
|
<div class="wrb-modal-body">
|
|
329
|
-
${e.introText?`<p class="wrb-intro">${
|
|
330
|
-
<form method="POST" action="${o}"${
|
|
331
|
-
${
|
|
344
|
+
${e.introText?`<p class="wrb-intro">${l(e.introText)}</p>`:""}
|
|
345
|
+
<form method="POST" action="${o}"${M(e)}>
|
|
346
|
+
${B(e,"#wrb-success","#wrb-error")}
|
|
332
347
|
<div class="wrb-actions">
|
|
333
|
-
<a href="#" class="wrb-cancel-btn">${
|
|
348
|
+
<a href="#" class="wrb-cancel-btn">${l(e.cancelLabel??"Abbrechen")}</a>
|
|
334
349
|
<button type="submit" class="wrb-submit-btn">
|
|
335
|
-
${
|
|
350
|
+
${l(e.submitLabel??"Absenden")}
|
|
336
351
|
</button>
|
|
337
352
|
</div>
|
|
338
353
|
</form>
|
|
339
|
-
${
|
|
354
|
+
${S(e)}
|
|
340
355
|
</div>
|
|
341
356
|
</div>
|
|
342
357
|
</div>
|
|
@@ -357,7 +372,7 @@ ${k}</style>`:`<style>${n}</style>`}
|
|
|
357
372
|
Bestätigung per E-Mail.
|
|
358
373
|
</p>
|
|
359
374
|
</div>
|
|
360
|
-
${
|
|
375
|
+
${S(e)}
|
|
361
376
|
</div>
|
|
362
377
|
</div>
|
|
363
378
|
</div>
|
|
@@ -378,7 +393,7 @@ ${k}</style>`:`<style>${n}</style>`}
|
|
|
378
393
|
<a href="#" class="wrb-cancel-btn">Schließen</a>
|
|
379
394
|
<a href="#wrb-modal" class="wrb-submit-btn">Erneut versuchen</a>
|
|
380
395
|
</div>
|
|
381
|
-
${
|
|
396
|
+
${S(e)}
|
|
382
397
|
</div>
|
|
383
398
|
</div>
|
|
384
|
-
</div>`}exports.WiderrufsModal=
|
|
399
|
+
</div>`}exports.WiderrufsModal=T;exports.WiderrufsWidget=D;exports.generateFallbackHtml=H;exports.generateModalHtml=V;exports.upgradeAllStaticForms=F;exports.upgradeStaticForm=q;
|
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';
|